مرجع مقالات رسمی طراحی سایت

 

یادگرفتن طراحی وب ریسپانسیو و واکنشگرا7 / 10از 4 استفاده کننده

در شرایطی که می‌خواهید یک قالب برخورد گرا پباده سازی نمایید می بایست بر متا تگ viewport و مدیا کوئری مسلط باشید. 

طراحی سایت در مشهد

برای ساخت وب سایت به طریق ریسپانسیو لازم می‌باشد در صدر خدمت متا تگ viewport را به خدمت تارنما افزوده و آنگاه مدیا کوئری را به پوشه CSS بیافزایید.

 

همان گونه که می‌دانید در طراحی وب به صورت ریسپانسیو، وبسایت بایستی در کلیه ی مانیتور ها، گوشی ها و تبلت ها به صورتی اکران داده شود که استفاده کننده احتیاجی به اسکرول کردن افقی نداشته باشد. برای این مراد لازم میباشد سایز این دستگاه ها را داشته باشیم.

 

مسلما لازم وجود ندارد خودتان برای این فعالیت وقت صرف فرمائید و می‌توانید از قاب ورک های مطرح استعمال فرمایید در‌این‌حالت‌ یک مرحله جلو خیس خواهید زمین خورد.

 

در قاب ورک بوت استرپ دستگاه ها را به طور تحت بخش بندی نموده است:

 

تلفن همراه : کوچیکتر از 768 پیکسل

 

تبلت: بزرگتر از 768 پیکسل

 

مانیتور رومیزی میانگین: بزرگتر از 992 پیکسل

 

مانیتور رو میزی پهناور: بزرگتر از 1200 پیکسل

 

Administrator\\files\\UploadFile\\Responsive_Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_Phone.jpg

 

اجزای گوناگون وب سایت را چه طور درین دستگاه ها اکران دهیم؟

 

برای در دست گرفتن پهنا اجزای متعدد وب سایت می بایست از max-width و min-width به کار گرفت.

 

فرض فرمایید یک تگ با ID: mabnasitedesign در سورس کد وبسایت وجود داشته باشد. بایستی آن را به نحوی قرار دهید که در هر قوانینی در راءس ورقه اکران قرار گیرد و در گوشی هایی که سایز کوچیکتر از 767 پیکسل دارا‌هستند تگ mabnasitedesign متناسب با بعدها گوشی تغییر و تحول نماید. برای این خواسته می توانید از کد تحت به کارگیری نمائید:

 

} (media screen and (max-width: 767px@

 

{ ;mabnasitedesign { width: 100%; margin:0 auto# 

 

{

 

حال این کد را برای تبلت باز نویسی میکنیم با این تفاوت که میخواهیم فقط در سمت راست صفحه نمایش داده شود:

 

} (media screen and (min-width: 768px) and (max-width: 991px@

 

{ ;mabnasitedesign {width: 150px; float: right# 

 

{

 

اکثر اشخاصی که در حوزه ساخت سایت کار مینمایند در ساید توشه تارنما از ID: right به کارگیری می‌کنند، شما نیز می توانید از کد های بالا برای ساید توشه استفاد فرمایید کافیست mabnasitedesign را به right تغییر‌و تحول دهید.