امروز تصمیم داریم آموزشی کامل در رابطه با طراحی واکنش گرای سایت را برای شما کاربران عزیز سایت خانه اسکریپت قرار دهیم ، آموزش ساده طراحی سایت ریسپانسیو responsive واکنش گرا در تبلت و موبایل در قالب پروژه منو ، ریسپانسیو به طراحی سایت با قابلیت های نمایش یوزر فرندلی userfrendly سایت در گجت ها گویند ، اگر میخواهید بیشتر درباره ریسپانسیو (responsive) بدانید بر روی متن روبرو کلیک کنید : طراحی رسپانسیو یا واکنشگرا (Responsive) چیست؟
برای طراحی سایت ریسپانسیو بعد از طراحی قابل درک از سه سایز وبسایت تان ابتدا در فایل هدر قالبتان دستورات ریسپانسیو را وارد کنید:
آموزش طراحی سایت ریسپانسیو responsive واکنش گرا
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name = “viewport” content = “width =device-width, initial-scale = 1.0”>
حالا بروی css قالب کار میکنیم.
مقدار width ها را برابر صد در صد می دهیم .
width:100%;
در طراحی ها از منوهای بالای سایت از آیکنی با قابلیت display با مقدار hidden استفادده می کنیم.(چون در حالت ریسپانسیو در تبلت فقط آیکن نمایش داده می شود.)
در پایان آموزش همه کد ها و فایل html قالب موجوداست
حالا تعیین میکنیم که سایز گجت ما در چه ابعادی است
@media only screen and (max-width:1024px;){
مقادیر دیگر سی اس اس
#menu-icon { display:inline-block;}کد نمایش آیکن منو بجای منو
}
به همین راحتی سایت رسپانسیو شد
آموزش طراحی سایت با قابلیت ریسپانسیو responsive واکنش گرا تبلت موبایل
(فیلم آموزش طراحی سایت واکنش گرا به زودی)
مرورگرهای موبایل برای سازگاری با سایتهایی که در گذشته طراحی شدهاند، از مفهومی به نام Viewport برای نمایش سایتها استفاده میکنند. Viewport فضایی مجازی است که معمولا حدود ۱۰۰۰ پیکسل عرض دارد. مرورگر موبایل سایت را در این فضای مجازی نمایش میدهد و سپس این تصویر را در فضای واقعی نمایشگر موبایل یا تبلت قرار میدهد.
نخستین گام در طراحی واکنشگرا، اطلاع رسانی به مرورگر برای تغییر اندازهی Viewport است تا به جای ۱۰۰۰ یا ۹۸۰ پیکسل پیشفرض، فضای مورد نظر برنامهنویس را به Viewport اختصاص دهد.
تغییر اندازهی Viewport با استفاده از تگ meta در سرآمد فایل html به انجام میرسد.
|
همانگونه که مشاهده میکنید، در مثال بالا عرض Viewport برابر ۴۸۰ پیکسل مشخص شده است. این مقدار حداقل مقدار ممکن است. چنانچه عرض نمایشگر موبایل بیش از ۴۸۰ پیکسل باشد، عرض Viewport هم افزایش خواهد یافت.
شیوهی دیگر در تغیین مقدار Viewport، تعیین آن با عرض فیزیکی نمایشگر است. برای این کار از کد زیر استفاده میشود:
|
اندازهی مجازی
به دلیل تراکم بیشتر پیکسلی در موبایلهای امروزی در مقایسه با تراکم متداول در نمایشگرهای لپتاپ و کامپیوترهای شخصی، مرورگرهای موبایل ممکن است هر پیکسل را بزرگتر از یک پیکسل به نمایش درآورند. به این معنی که مثلا اگر عرض یک عنصر ۲۰۰ پیکسل مشخص شود، ممکن است این مقدار مساوی ۴۰۰ پیکسل به نمایش درآید.
درصد بزرگنمایی پیکسل در مرورگرهای مختلف و در دستگاههای مختلف و در سیستمعاملهای مختلف، متغیر است. بنابراین یکی از مهمترین نکات در طراحی واکنشگرا، عدم اعتماد به اندازهی پیکسلها است.
در سایت Screen Sizes میتوانید اندازهی واقعی و مجازی پیکسل در ابزارهای مختلف را مشاهده کنید.
برای مثال گوشی Galaxy SII دارای ۴۸۰ پیکسل واقعی و ۳۲۰ پیکسل مجازی است. به عبارت دیگر، اگر شما یک تصویر با عرض ۳۲۰ پیکسل را در این گوشی به نمایش در بیاورید، این تصویر ۴۸۰ پیکسل فضا اشغال خواهد کرد.
بهترین راه حل برای پایداری طرح، استفاده از واحدهای فیزیکی مانند point، cm، و … است
بزرگنمایی
مرورگرهای موبایل ممکن است به صورت پیشفرض صفحات شما را بزرگنمایی یا کوچکنمایی کنند. از موارد قابل کنترل در تگ meta اندازهی بزرگنمایی و کوچکنمایی است.
1 |
<meta name="viewport" content="width=480, initial-scale=1, maximum-scale=2"> |
در کد بالا بیشترین اندازهی بزرگنمایی ۲ برابر و اندازهی پیشفرض آن ۱ تعیین شده است.
عملکرد خاص مرورگر سافاری ممکن است باعث شود بخواهید همیشه مقدار maximum-scale را برابر ۱ قرار دهید. این مرورگر چنانچه صفحهی موبایل گردانده شود تا از حالت عمودی به افقی درآید، صفحه را بار دیگر پردازش نمیکند و همان صفحهی عمودی را بزرگنمایی میکند تا در عرض صفحه جای بگیرد. با تعیین مقدار maximum-scale به ۱، این عملکرد سافاری اصلاح میشود. البته این کار سبب میشود تا کاربران دیگر قادر به بزرگنمایی صفحه نباشند که خود یک اشکال به حساب میآید.
عرض حداقل و حداکثر
برای آنکه صفحات وب در همهجا به بهترین شکل ممکن نمایش داده شوند، لازم است تا عرض حداقل و حداکثر برای عنصر body تعیین شود. با توجه به جدول سایت Screen Sizes که بالاتر مشاهده کردید، حداقل عرض مجازی میتواند ۳۲۰ پیکسل و با توجه به آخرین آمار استفاده کنندگان لپتاپ و کامپیوتر، حداکثر عرض مناسب، ۱۰۰۰ پیکسل است. البته ممکن است با توجه به تقسیمپذیری بهتر ۹۶۰ در مقایسه با ۱۰۰۰، بخواهید از این عدد استفاده کنید.
دید جعبهای یا بر پایهی ماژول
در طراحی واکنشگرا، لازم است تا محتوای ما در جعبههای مجزا قرار بگیرند تا امکان جابجایی یا حذف آنها در صورت نیاز فراهم شود. استفاده از تصویرهای بزرگ یا محتوای جدولی که قابلیت تغییر شکل و حذف را به سادگی ندارند، یک مانع در برابر طراحی واکنشگرا به حساب میآیند.
ویژگیهای خاص شیوهنامههای CSS برای پیادهسازی طرح واکنشگرا
مهمترین ویژگی CSS برای پشتیبانی طراحی واکنشگرا، دستور media است. این دستور به ما کمک میکند تا بر اساس عرض صفحه، ویژگیهای عنصرهای دلخواه خود را تغییر دهیم. min-width و max-width در مقابل media ابزارهایی هستند که بسیار ما را یاری خواهند داد:
|
همان گونه که مشاهده میکنید، شاید لازم شود به ازای هر عنصر، چندین حالت مختلف از نمایش طراحی شود و گاهی لازم شود تا یک عنصر به صورت کامل از دید مخفی شود.
تصویرها
دانستن دو نکته در مورد تصویرها الزامی است. نخست انتخاب اندازهی مناسب برای تصویرها طوری که کیفیت آنها در هنگام نمایش کم نشود و حجم آنها هم متناسب با محدودیتهای ارتباطی شبکههای موبایل باشد و نکتهی دوم تغییر عرض خودکار تصویر بر اساس عرض صفحه است.
بهتر است اندازهی تصویر مساوی بزرگترین اندازهی پیکسلهای واقعی نمایشگر کامپیوتر در نظر گرفته شود. برای مثال عدد ۱۰۰۰ یا ۱۳۶۶ میتواند مقدار مناسبی باشد.
در نمایشگرهای کوچکتر، با تعیین اندازهی درصدی عرض و تعیین نکردن ارتفاع یا قرار دادن مقدار auto برای آن میتوان یک تصویر واکنشگرا در اختیار داشت
|
تغییر اندازهی تصاویر پسزمینه هم در css به شکل زیر انجام میشود:
|
نکتهی قابل توجه در قطعه کد بالا، استفاده از padding-top برای مشخص کردن ارتفاع div است. با توجه به اینکه معیار padding عرض عنصر والد است. با کمک آن میتوان، ارتفاع یک عنصر را به صورت Responsive تعیین کرد.
اندازهی فونتها
بهترین واحد برای مشخص کردن، اندازهی فونتها واحدهای فیزیکی هستند. برای مثال تعیین اندازهی فونت پیشفرض صفحه با مقدار “۱۴pt” به جای “۱۴px” و تعیین اندازهی عنصرهای داخلی بر اساس «درصد» یا «em» راه حلی مطمئن برای داشتن نوشتههای واکنشگرا است.