طراحی وب واکنش‌گرا - جستجوهای رسانه‌ای
- صفحه قبلی نمای شبکه‌ای RWD
- صفحه بعدی تصویر RWD
جستجوی رسانه‌ای چیست؟
جستجوی رسانه‌ای یکی از تکنیک‌های CSS3 است که در CSS3 معرفی شده است.
فقط در صورت رعایت شرایط خاص، استفاده می‌شود @media قوانین برای مراجعه به بلوک‌های ویژگی CSS.
مثال
اگر پنجره مرورگر 600px یا کمتر باشد، رنگ پس‌زمینه به رنگ آبی روشن خواهد بود:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
افزودن نقطه شکست
در این آموزش، ما کمی پیش‌تر یک صفحه وب شامل خطوط و ستون‌ها ساختیم، اما این صفحه واکنش‌گرا در صفحه‌های نمایش کوچک به خوبی به نظر نمی‌رسید.
جستجوی رسانه‌ای می‌تواند به شما کمک کند. می‌توانیم یک نقطه شکست اضافه کنیم که در هر سمت از نقطه شکست، بخش‌های خاصی از طراحی به طور متفاوتی عمل می‌کنند.
کامپیوتر رومیزی
تلفن همراه
با استفاده از جستجوی رسانه‌ای در 768px یک نقطه شکست اضافه کنید:
مثال
وقتی که صفحه نمایش (پنجره مرورگر) کمتر از 768px باشد، عرض هر ستون باید 100٪ باشد:
/* برای دستگاه‌های رومیزی: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* برای موبایل‌ها: */
[class*="col-"] {
width: 100%;
}
}
همیشه طراحی اولویت اول موبایل
اولویت اول موبایل (Mobile First) به این معناست که قبل از طراحی برای کامپیوترهای رومیزی یا هر دستگاه دیگر، باید ابتدا برای دستگاه‌های موبایل طراحی کرد (این باعث می‌شود که صفحه در دستگاه‌های کوچکتر سریع‌تر نمایش داده شود).
این به این معناست که باید در CSS بهبودهایی انجام دهیم.
وقتی که عرض کمتر از 768px باشد، باید طراحی را تغییر دهیم، نه عرض را. ما اینطور طراحی “اولویت اول موبایل” را انجام دادیم:
مثال
/* برای موبایل‌ها: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* برای دسکتاپ: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
یک نقطه شکست دیگر
شما می‌توانید تعداد بی‌نهایت نقطه شکست اضافه کنید.
ما همچنین یک نقطه شکست بین تبلت و تلفن همراه قرار می‌دهیم.
کامپیوتر رومیزی
تبلت
تلفن همراه
برای این منظور، ما یک جستجوی رسانه‌ای اضافه کردیم (در 600 پیکسل) و برای دستگاه‌هایی که بیش از 600 پیکسل (اما کمتر از 768 پیکسل) دارند، یک مجموعه جدید از کلاس‌ها اضافه کردیم:
مثال
لطفاً توجه داشته باشید که دو گروه از کلاس‌ها تقریباً مشابه هستند، تنها تفاوت در نام‌ها (col- و col-s-) است:
/* برای موبایل‌ها: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* برای تبلت‌ها: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* برای دسکتاپ: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
دو گروه از کلاس‌های مشابه به نظر غیرعادی می‌رسند، اما این به ما فرصتی می‌دهد تا با استفاده از HTML تصمیم بگیریم که در هر نقطه شکست چه چیزی برای ستون‌ها اتفاق می‌افتد:
مثال HTML
برای کامپیوترهای رومیزی:
بخش اول و سوم بر روی 3 ستون خواهند بود. بخش میانی بر روی 6 ستون خواهد بود.
برای تبلت‌ها:
بخش اول بر روی 3 ستون خواهد بود، بخش دوم بر روی 9 ستون خواهد بود، بخش سوم در زیر دو بخش اول نمایش داده خواهد شد و بر روی 12 ستون خواهد بود:
<div class="row"> <div class="col-3 col-s-3">...</div> <div class="col-6 col-s-9">...</div> <div class="col-3 col-s-12">...</div> </div>
نقاط برش دستگاه‌های معمول
صفحات و دستگاه‌های مختلف با ارتفاع و عرض متفاوت بی‌شمار هستند، بنابراین ایجاد نقاط برش دقیق برای هر دستگاه دشوار است. برای سادگی، می‌توانید این پنج گروه را هدف قرار دهید:
مثال
/* دستگاه‌های بسیار کوچک (تلفن‌ها، 600px و پایین‌تر) */
@media only screen and (max-width: 600px) {...}
/* دستگاه‌های کوچک (تبلت‌های عمودی و تلفن‌های بزرگ، 600 پیکسل و بالاتر) */
@media only screen and (min-width: 600px) {...}
/* دستگاه‌های متوسط (تبلت‌های افقی، 768 پیکسل و بالاتر) */
@media only screen and (min-width: 768px) {...}
/* دستگاه‌های بزرگ (لپ‌تاپ‌ها/کامپیوترهای رومیزی، 992px و بالاتر) */
@media only screen and (min-width: 992px) {...}
/* دستگاه‌های بزرگ (لپ‌تاپ‌های بزرگ و کامپیوترهای رومیزی، 1200px و بالاتر) */
@media only screen and (min-width: 1200px) {...}
جهت: تصویر/منطقه دید
پرس و جوهای رسانه‌ای همچنین می‌توانند برای تغییر چیدمان صفحه‌بندی وب‌سایت بر اساس جهت مرورگر استفاده شوند.
می‌توانید مجموعه‌ای از ویژگی‌های CSS را تنظیم کنید که تنها زمانی اعمال می‌شوند که عرض پنجره مرورگر بزرگتر از ارتفاع آن باشد، که به آن "حالت افقی" گفته می‌شود:
مثال
اگر حالت جهت به حالت افقی (landscape mode) باشد، پس زمینه وب‌سایت به رنگ آبی روشن خواهد بود:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
مخفی کردن عناصر با استفاده از پرس و جوهای رسانه‌ای
یکی از کاربردهای رایج پرس و جوهای رسانه‌ای، مخفی کردن عناصر در اندازه‌های مختلف صفحه نمایش است:
مثال
/* اگر اندازه صفحه نمایش 600 پیکسل یا کوچکتر باشد، این عنصر را مخفی کنید */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
تغییر اندازه فونت با استفاده از پرس و جوهای رسانه‌ای
شما همچنین می‌توانید از پرس و جوهای رسانه‌ای برای تغییر اندازه فونت عناصر در اندازه‌های مختلف صفحه نمایش استفاده کنید:
مثال
/* اگر اندازه صفحه نمایش 601px یا بزرگتر باشد، اندازه font-size <div> را به 80px تنظیم کنید */
@media only screen and (min-width: 601px) {}}
div.example {
font-size: 80px;
}
}
/* اگر اندازه صفحه نمایش 600px یا کمتر باشد، اندازه font <div> را به 30px تنظیم کنید */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
دستورالعمل‌های @media CSS
برای توضیحات کامل همه نوع‌های رسانه‌ای و ویژگی‌ها/عبارات در در دستورالعمل‌های CSS مراجعه به @media کنید.
- صفحه قبلی نمای شبکه‌ای RWD
- صفحه بعدی تصویر RWD
