CSS Media Queries - مثال
- صفحه قبلی CSS معیارهای رسانه
- صفحه بعدی معرفی RWD
CSS Media Queries - مثال‌های بیشتر
بگذارید به مثال‌های بیشتری از استفاده از معیارهای رسانه‌ای نگاه کنیم.
بررسی کنید که چگونه می‌توان از معیارهای رسانه‌ای برای ارسال استایل‌های اختصاصی به دستگاه‌های مختلف استفاده کرد.
در اینجا یک مثال ساده برای نمایش تغییر رنگ پس‌زمینه برای دستگاه‌های مختلف آورده شده است:
مثال
/* رنگ پس‌زمینه body را به رنگ قهوه‌ای تنظیم کنید */
body {
background-color: tan;
}
/* در صفحه‌هایی با کمتر یا برابر با 992 پیکسل، رنگ پس‌زمینه را به رنگ آبی تنظیم کنید */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* در صفحه‌هایی با 600 پیکسل یا کمتر، رنگ پس‌زمینه را به رنگ زیتونی تنظیم کنید */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
آیا می‌خواهید بدانید چرا ما از 992px و 600px به عنوان نقطه‌های قطع نمونه (typical breakpoints) دقیق استفاده می‌کنیم؟ این‌ها همان چیزی هستند که ما به آن‌ها نقطه‌های قطع نمونه می‌گوییم. شما می‌توانید در آموزش طراحی وب‌سایت‌های پاسخگو آموزش بیشتر درباره نقطه‌های قطع نمونه در CSS.
菜单的媒体查询
جستجوی رسانه‌ای برای منو
یکی از کاربردهای معمول جستجوی رسانه‌ای ایجاد چیدمان انعطاف‌پذیر است. در این مثال، ما یک چیدمان ایجاد کرده‌ایم که در بین چهار ستون، دو ستون و ستون تمام عرض در اندازه‌های مختلف صفحه نمایش تغییر می‌کند:
صفحه‌های متوسط:
مثال
About
/* محیط ناوبری */
.topnav {
overflow: hidden;
}
background-color: #333;
/* در صفحه‌هایی که عرض کمتر یا برابر با 600 پیکسل است، لینک‌های منو به جای قرار گرفتن در کنار یکدیگر، به صورت پشته‌ای قرار می‌گیرند */
/* ایجاد چهار ستون شناور برابر که به یکدیگر نزدیک هستند */
/* لینک‌های ناوبری */
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
text-decoration: none;
@media screen and (max-width: 600px) {
/* در صفحه‌هایی که عرض کمتر یا برابر با 600 پیکسل است، لینک‌های منو به جای قرار گرفتن در کنار یکدیگر، به صورت پشته‌ای قرار می‌گیرند */
.topnav a {
width: 50%;
}
}
float: none;
جستجوی رسانه‌ای برای ستون‌ها
یکی از کاربردهای معمول جستجوی رسانه‌ای ایجاد چیدمان انعطاف‌پذیر است. در این مثال، ما یک چیدمان ایجاد کرده‌ایم که در بین چهار ستون، دو ستون و ستون تمام عرض در اندازه‌های مختلف صفحه نمایش تغییر می‌کند:
صفحه‌های بزرگ:
صفحه‌های متوسط:
مثال
صفحه‌های کوچک:
.column {
/* ایجاد چهار ستون شناور برابر که به یکدیگر نزدیک هستند */
float: left;
}
width: 25%;
@media screen and (max-width: 992px) {
.column {
/* در صفحه‌هایی که عرض کمتر یا برابر با 992 پیکسل است، از چهار ستون به دو ستون تبدیل می‌شود */
}
}
/* در صفحه‌هایی که عرض کمتر یا برابر با 600 پیکسل است، ستون‌ها به جای قرار گرفتن در کنار یکدیگر، به صورت پشته‌ای قرار می‌گیرند */
@media screen and (max-width: 600px) {
.column {
width: 50%;
}
}
توجه:width: 100%;
برای یادگیری بیشتر در مورد ماژول چیدمان کیسه‌ای، لطفاً به روش‌های مدرن‌تر ایجاد چیدمان ستون‌ها با استفاده از CSS Flexbox (لطفاً به مثال زیر مراجعه کنید) مراجعه کنید. اما، این نسخه‌های Internet Explorer 10 و قدیمی‌تر از آن پشتیبانی نمی‌کنند. اگر نیاز به پشتیبانی از IE6-10 دارید، از شناور (مانند آنچه در بالا نشان داده شده) استفاده کنید. Flexbox CSS این فصل.
برای یادگیری بیشتر در مورد طراحی وب واکنش‌گرا، لطفاً فصل ما را مطالعه کنید. آموزش طراحی وب‌سایت‌های پاسخگو.
مثال
/* محیط کیسه‌ای انعطاف‌پذیر */
.row {
display: flex;
flex-wrap: wrap;
}
/* ایجاد چهار ستون برابر */
.column {
flex: 25%;
padding: 20px;
}
/* در صفحه‌هایی که عرض کمتر یا برابر با 992 پیکسل است، از چهار ستون به دو ستون تبدیل می‌شود */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* در صفحه‌هایی که عرض کمتر یا برابر با 600 پیکسل است، ستون‌ها به جای قرار گرفتن در کنار یکدیگر، به صورت پشته‌ای قرار می‌گیرند */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
استفاده از جستجوی رسانه‌ای برای پنهان کردن عناصر
استفاده از جستجوی رسانه‌ای به عنوان یک روش معمول برای پنهان کردن عناصر در اندازه‌های مختلف صفحه نمایش:
من در صفحه‌های کوچک پنهان می‌شوم.
مثال
/* اگر اندازه صفحه نمایش 600 پیکسل یا کمتر باشد، این عنصر را پنهان کنید */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
با جستجوی رسانه‌ها فونت را تغییر دهید
شما همچنین می‌توانید از جستجوی رسانه‌ها برای تغییر اندازه فونت عناصر در اندازه‌های مختلف صفحه نمایش استفاده کنید:
اندازه فونت متغیر
مثال
/* اگر اندازه صفحه نمایش بیشتر از 600 پیکسل باشد، اندازه فونت <div> را به 80 پیکسل تنظیم کنید */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* اگر اندازه صفحه نمایش 600 پیکسل یا کمتر باشد، اندازه فونت <div> را به 30 پیکسل تنظیم کنید */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
کتابخانه تصاویر انعطاف‌پذیر
در این مثال، ما از جستجوی رسانه‌ها و flexbox با هم استفاده می‌کنیم تا یک کتابخانه تصاویر پاسخگو ایجاد کنیم:
مثال
وب‌سایت انعطاف‌پذیر
در این مثال، ما از جستجوی رسانه‌ها و flexbox با هم استفاده می‌کنیم تا یک وب‌سایت پاسخگو ایجاد کنیم که دارای ناوبری انعطاف‌پذیر و محتوای انعطاف‌پذیر است.
مثال
جهت: تصویر / مناظر
جستجوی رسانه‌ها همچنین می‌تواند برای تغییر چیدمان صفحه بر اساس جهت مرورگر استفاده شود.
شما می‌توانید یک مجموعه از خصایص CSS را تنظیم کنید که تنها در شرایطی که عرض پنجره مرورگر بزرگتر از ارتفاع آن باشد، اعمال می‌شوند، که به آن حالت افقی گفته می‌شود:
مثال
اگر حالت جهت به حالت افقی باشد، از رنگ پس‌زمینه سبز روشن استفاده کنید:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
عرض از حداقل به حداکثر
شما همچنین می‌توانید از خصایص max-width و min-width برای تنظیم حداقل و حداکثر عرض استفاده کنید.
مثلاً، وقتی عرض مرورگر بین 600 تا 900 پیکسل باشد، ظاهر عناصر <div> را تغییر دهید:
مثال
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
استفاده از ارزش اضافی: در مثال زیر، ما از کاما (مانند عملگر OR) برای اضافه کردن جستجوی رسانه‌ای اضافی به جستجوی رسانه‌ای موجود استفاده می‌کنیم:
مثال
/* وقتی عرض صفحه بین 600 تا 900 پیکسل باشد یا بیشتر از 1100 پیکسل باشد - ظاهر <div> را تغییر دهید */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
مرجع @media CSS
برای بررسی کامل همه نوع‌های رسانه و ویژگی‌ها/عبارات، لطفاً به قانون @media در مرجع CSS.
توجه:برای یادگیری بیشتر در مورد طراحی وب‌سایت‌های پاسخگو (چگونه برای دستگاه‌ها و صفحه‌نمایش‌های مختلف هدف قرار دهیم) و استفاده از نقاط شکست جستجوهای رسانه‌ای، لطفاً به آموزش طراحی وب‌سایت‌های پاسخگو.
- صفحه قبلی CSS معیارهای رسانه
- صفحه بعدی معرفی RWD
