طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumنصب اسکریپت subscene-pro9140zolfaghari
iconforumمخفی کردن تگ ها09zolfaghari
iconforumدرخواست قالب455H A S A N
iconforumدرخواست معرفی سایت برای خرید پاپ اپ340H A S A N
iconforumمشکل در idm08Configer
iconforumنیازمند اموزش نصب اسکریپت بلاگ خوان268bikas
iconforumسوال در مورد مشکل با اسکریپت بلاگریدر11607Aranesh
iconforumثبت نام کنکور سراسری 96011mohamad139400
iconforumهمکاری در زمینه طراحی سایت و...470mostafa.pc92
iconforumبدست اوردن لینک دانلود763smz9999
iconforumسئو داخلی وب‌سایت – بهینه‌سازی مطلب + اینفوگرافیک022AynaZ

آموزش وردپرس WordPressآموزش وردپرس WordPress سایت

آموزش جی کوئری jQueryآموزش جی کوئری jQuery جاوا اسکریپت

آموزش انگولار جی اس Angular JS آموزش انگولار جی اس 2 AngularJS 

آموزش اچ تی ام ال HTML5 CSS3آموزش HTML5 و CSS3 اچ تی ام ال 5

آموزش پی اچ پی PHPآموزش پی اچ پی PHP پک 1 برنامه نویسی وب

آموزش سئو SEO آموزش سئو سایت و وردپرس SEO گوگل 

آموزش سوئیفت SWIFT آموزش سوئیفت Swift برنامه نویسی اپل

آموزش برنامه نویسی اندروید استودیو  آموزش برنامه نویسی اندروید استودیو  

آموزش زامارین Xamarinآموزش زامارین Xamarin برنامه نویسی موبایل

درگاه پرداخت

آموزش اصول طراحی قالب واکنش گرا Responsive

آموزش ها , مقالات,آموزش,ترفند
آموزش اصول طراحی قالب واکنش گرا ResponsiveReviewed by Admin on Jul 8Rating:

روز به روز به تعداد کسانی که از ابزارهای قابل حمل برای دسترسی به اینترنت استفاده می‌کنند شامل تبلت و گوشی های لمسی مدل بالا افزوده می‌شود. ریسپانسیو به معنای پاسخ گرا یا واکنشی می باشد. به این معنا که طراحی وب سایت به گونه ای می باشد که در صفحات مختلف و ابزارهای متفاوت سایت به درستی نمایش داده می شود. طراحی سایت به گونه‌ای که در هر عرض و طول صفحه قابل استفاده باشد اصطلاحا طراحی واکنش‌ گرا یا Responsive web design نامیده می‌شود. برای ایجاد یک طرح واکنش‌ گرا داشتن چند نکته ضروری است که در این مطلب به آنها اشاره ای خواهیم کرد. پس با ما باشید.

Viewport :

مرورگرهای موبایل برای سازگاری با سایت‌ هایی که در زمان گذشته طراحی شده‌ انداز مفهومی به نام Viewport برای نمایش سایت‌ها استفاده می‌کنند. Viewport فضایی مجازی است که معمولا حدود ۱۰۰۰ پیکسل عرض دارد و مرورگر موبایل یا تبلت سایت را در این فضای مجازی نمایش می‌دهد و سپس این تصویر را در فضای واقعی نمایشگر موبایل یا تبلت قرار می‌دهد.

  • نخستین گام

اطلاع رسانی به مرورگر برای تغییر اندازه‌ Viewport است تا به جای ۱۰۰۰ یا ۹۸۰ پیکسل پیش‌ فرض فضای مورد نظر برنامه‌ نویس را به Viewport اختصاص دهد. تغییر اندازه‌ی Viewport با استفاده از تگ meta در سرآمد فایل html به انجام می‌ رسد.

 در مثال بالا عرض Viewport برابر ۴۸۰ پیکسل مشخص شد. این مقدار حداقل مقدار ممکن است و چنانچه عرض نمایشگر موبایل بیش از ۴۸۰ پیکسل باشد عرض Viewport هم افزایش خواهد یافت.

راه کاری دیگر در تعیین مقدار Viewport تعیین آن با عرض فیزیکی نمایشگر است که برای این کار از کد زیر استفاده می‌ شود :

در ادامه بخوانید  نمایش پیغام دلخواه در صفحات مدیریت وردپرس

  اندازه‌ مجازی :

به دلیل تراکم بیشتر پیکسلی در موبایل‌ و تبلت های امروزی در مقایسه با تراکم متداول در نمایشگرهای لپ‌ تاپ و کامپیوترهای شخصی مرورگرهای موبایل ممکن است هر پیکسل را بزرگتر از یک پیکسل به نمایش درآورند به این معنی که مثلا اگر عرض یک عنصر ۲۰۰ پیکسل مشخص شود ممکن است این مقدار مساوی ۴۰۰ پیکسل به نمایش داده شود.
درصد بزرگنمایی پیکسل در مرورگرهای مختلف و در دستگاه‌ های مختلف و در سیستم‌عامل‌ های مختلف متغیر و قابل تغییر می باشد. بنابراین یکی از مهم‌ ترین نکات در طراحی واکنش‌ گرا عدم اعتماد به انداز‌ه‌ی پیکسل‌ ها می باشد. در سایت Screen Sizes می‌توانید اندازه واقعی و مجازی پیکسل در ابزارهای مختلف را مشاهده کنید.
برای مثال گوشی Galaxy SII دارای ۴۸۰ پیکسل واقعی و ۳۲۰ پیکسل مجازی است. به عبارت دیگر، اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی به نمایش در بیاورید، این تصویر ۴۸۰ پیکسل فضا اشغال خواهد کرد. بهترین راه حل برای پایداری طرح، استفاده از واحدهای فیزیکی مانند point , cm , و … می باشد.

بزرگنمایی :

مرورگرهای موبایل ممکن است به صورت پیش‌ فرض صفحات شما را بزرگنمایی یا کوچکنمایی کنند. از موارد قابل کنترل در تگ meta اندازه‌ بزرگ نمایی و کوچک‌ نمایی هست.

 در کد بالا بیشترین اندازه‌ بزرگ نمایی ۲ برابر و اندازه‌ پیش‌ فرض آن ۱ تعیین شده است.

عملکرد خاص مرورگر Safari ممکن است باعث شود بخواهید همیشه مقدار maximum-scale را برابر ۱ قرار دهید. این مرورگر چنانچه صفحه‌ موبایل گردانده شود تا از حالت عمودی به افقی درآید صفحه را بار دیگر پردازش نمی‌ کند و همان صفحه‌ عمودی را بزرگنمایی میکند تا در عرض صفحه جای بگیرد. با تعیین مقدار maximum-scale به ۱ این عملکرد Safari اصلاح می‌شود و البته این کار سبب می شود تا کاربران دیگر قادر به بزرگ نمایی صفحه نباشند که خود یک اشکال به حساب می‌آید.

در ادامه بخوانید  دانلود کتاب راه های مقابله با کیلاگر به زبان فارسی

عرض حداقل و حداکثر :

برای آنکه صفحات وب در همه‌ جا به بهترین شکل ممکن نمایش داده شوند، لازم است تا عرض حداقل و حداکثر برای عنصر body تعیین شود. با توجه به جدول سایت Screen Sizes که بالاتر مشاهده کردید حداقل عرض مجازی می‌تواند ۳۲۰ پیکسل و با توجه به آخرین آمار استفاده کنندگان لپ‌ تاپ و کامپیوترحداکثر عرض مناسب ۱۰۰۰ پیکسل است و البته ممکن است با توجه به تقسیم پذیری بهتر ۹۶۰ در مقایسه با ۱۰۰۰، بخواهید از این عدد استفاده کنید.

دید جعبه‌ ای یا بر پایه‌ ماژول :

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

ویژگی‌های خاص شیوه‌نامه‌های CSS برای پیاده‌سازی طرح واکنش‌ گرا :

مهم‌ترین ویژگی CSS برای پشتیبانی طراحی واکنش‌ گرا دستور media است. این دستور به ما کمک می‌کند تا بر اساس عرض صفحه ویژگی‌های عنصرهای دلخواه خود را تغییر دهیم. min-width و max-width در مقابل media ابزارهایی هستند که بسیار ما را یاری خواهند داد.

در ادامه بخوانید  دکمه دانلود آبی و نارنجی به صورت لایه باز

 همان گونه که مشاهده می‌کنید شاید لازم شود به ازای هر عنصر چندین حالت مختلف از نمایش طراحی شود و گاهی لازم شود تا یک عنصر به صورت کامل از دید مخفی شود.

تصویر ها :

دانستن دو نکته در مورد تصویرها الزامی است. نخست انتخاب اندازه‌ مناسب برای تصویرها به طوری که کیفیت آن‌ ها در هنگام نمایش کم نشود و حجم آن‌ها هم متناسب با محدودیت‌ های ارتباطی شبکه‌ های موبایل باشد و نکته‌ی دوم تغییر عرض خودکار تصویر بر اساس عرض صفحه است. بهتر است اندازه‌ تصویر مساوی بزرگترین اندازه‌ پیکسل‌ های واقعی نمایشگر کامپیوتر در نظر گرفته شود. برای مثال عدد ۱۰۰۰ یا ۱۳۶۶ می‌تواند مقدار مناسبی باشد. در نمایشگرهای کوچکتر با تعیین اندازه‌ درصدی عرض و تعیین نکردن ارتفاع یا قرار دادن مقدار auto برای آن می‌ توان یک تصویر واکنش‌ گرا در اختیار داشت.

 تغییر اندازه‌ی تصاویر پس‌زمینه هم در css به شکل زیر انجام می‌شود.

 نکته‌ قابل توجه در قطعه کد بالا استفاده از padding-top برای مشخص کردن ارتفاع div است. با توجه به اینکه معیار padding عرض عنصر والد است. با کمک آن می‌توان ارتفاع یک عنصر را به صورت Responsive تعیین کرد.

اندازه‌ فونت‌ وب :
بهترین واحد برای مشخص کردن اندازه‌ فونت‌ وب واحد های فیزیکی هستند. برای مثال تعیین اندازه‌ فونت پیش‌ فرض صفحه با مقدار “۱۴pt” به جای “۱۴px” و تعیین اندازه‌ عنصرهای داخلی بر اساس «درصد» یا «em» راه حلی مطمئن برای داشتن نوشته‌ های واکنش‌ گرا است.


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست پربازدید با منابع کاملا اختصاصی


مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/04/17 58 آموزش ها , مقالات,آموزش,ترفند

لینک کوتاه مطلب : http://www.20script.ir/?p=7282

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,151دانلود قالب شرکتی Rocked فارسی برای وردپرس تاریخ : 1394/05/30
2,039اسکریپت سایت ساز و ساب دومین دهی STSBuilder تاریخ : 1395/04/22
3,119پوسته جوملا برای سایت های اشتراک گذاری ویدیو تاریخ : 1392/09/23
13,590ابزار قالب ساز آنلاین مخصوص بلاگفا تاریخ : 1394/06/4
1,988اسکریپت بازی آنلاین و سرگرم کننده Halloween Slot تاریخ : 1395/07/8
5,002ساخت صفحه Coming Soon با افزونه وردپرس تاریخ : 1393/02/30
1,650قالب چندمنظوره Ri Everest برای وردپرس تاریخ : 1395/02/5
2,091افزونه ردیابی رتبه کلمات کلیدی Rankie برای وردپرس تاریخ : 1395/02/16
1,569اسکریپت اشتراک گذاری مطالب Sharen نسخه 3.6 تاریخ : 1395/01/9
3,924ستاره دار کردن مطالب در گوگل با افزونه Rich Snippets تاریخ : 1395/06/3
3,071دانلود قالب پاپ آپ HTML فروش ویژه ساعت تاریخ : 1393/10/12
3,503طراحی قالب HTML به صورت آنلاین با اسکریپت Architect نسخه 1.7 تاریخ : 1395/02/26
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب