طراحی سایت و نکات مربوط به آن

 

یادگرفتن ساخت سایت ریسپانسیو و واکنشگرا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 تغییر‌و تحول دهید.