Media Queries

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

Media Queries در CSS - مثال‌های بیشتر

می خواهیم به مثال‌های بیشتری از استفاده media queryها بیندازیم.[۱]

Media queryها روش های محبوبی برای ارائه یک style sheet مناسب برای دستگاه‌های مختلف هستند. برای نمایش یک مثال ساده، می‌توانیم رنگ پس زمینه را برای دستگاه‌های مختلف عوض کنیم:

مثال
 1 /* Set the background color of body to tan */
 2 body {
 3   background-color: tan;
 4 }
 5 
 6 /* On screens that are 992px or less, set the background color to blue */
 7 @media screen and (max-width: 992px) {
 8   body {
 9     background-color: blue;
10   }
11 }
12 
13 /* On screens that are 600px or less, set the background color to olive */
14 @media screen and (max-width: 600px) {
15   body {
16     background-color: olive;
17   }
18 }


آیا شما می‌خواهید بدانید چرا ما دقیقاً از ۹۹۲ پیکسل و ۶۰۰ پیکسل استفاده می‌کنیم؟ آنها «نقاط شکست معمول» (Typical breakpoint) دستگاه ها هستند.

<translate> نکته</translate>  نکته: شما می‌توانید در مورد نقاط شکست معمول در آموزش طراحی وب واکنش گرا مطالب بیشتری بخوانید.

Media Querieها برای منوها

در این مثال، ما از media queryها برای ساخت یک منوی navigation واکنش گرا استفاده می‌کنیم، که در طراحی صفحه نمایش‌های با اندازه های مختلف، متفاوت است.

صفحه نمایش‌های بزرگ

صفحه نمایش‌های کوچک

مثال
 1 /* The navbar container */
 2 .topnav {
 3   overflow: hidden;
 4   background-color: #333;
 5 }
 6 
 7 /* Navbar links */
 8 .topnav a {
 9   float: left;
10   display: block;
11   color: white;
12   text-align: center;
13   padding: 14px 16px;
14   text-decoration: none;
15 }
16 
17 /* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
18 @media screen and (max-width: 600px) {
19   .topnav a {
20     float: none;
21     width: 100%;
22   }
23 }


Media queryها برای ستون ها

یک استفاده رایج از media queryها، ساخت یک چیدمان منعطف (به انگلیسی: flexible) است. در این مثال، چیدمانی می‌سازیم که بین چهار، دو، و ستون‌های تمام عرض با توجه به اندازه صفحه نمایش‌ها متفاوت است.

صفحه نمایش‌های بزرگ

صفحه نمایش‌های متوسط

صفحه نمایش‌های کوچک

مثال
 1 /* Create four equal columns that floats next to each other */
 2 .column {
 3   float: left;
 4   width: 25%;
 5 }
 6 
 7 /* On screens that are 992px wide or less, go from four columns to two columns */
 8 @media screen and (max-width: 992px) {
 9   .column {
10     width: 50%;
11   }
12 }
13 
14 /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
15 @media screen and (max-width: 600px) {
16   .column {
17     width: 100%;
18   }
19 }


نکته: یک راه مدرن‌تر برای ساخت چیدمان‌های ستون بندی شده، استفاده از Flexbox در CSS است (مثال زیر را ببینید). اما، این ویژگی در اینترنت اکسپلور ۱۰ و نسخه های قدیمی‌تر پشتیبانی نمی‌شود. اگر نیازمند پشتیبانی از IE6 تا IE10 هستید، از floatها استفاده کنید (همان‌طور که در بالا نشان داده شد).

برای یادگیری مطالب بیشتر در مورد ماژول چیدمان flexible box، فصل flexbox در CSS ما را مطالعه کنید.

برای یادگیری مطالب بیشتر در مورد طراحی واکنش گرای وب‌سایت، آموزش طراحی واکنش گرای وب ما را بخوانید.

مثال
 1 /* Container for flexboxes */
 2 .row {
 3   display: flex;
 4   flex-wrap: wrap;
 5 }
 6 
 7 /* Create four equal columns */
 8 .column {
 9   flex: 25%;
10   padding: 20px;
11 }
12 
13 /* On screens that are 992px wide or less, go from four columns to two columns */
14 @media screen and (max-width: 992px) {
15   .column {
16     flex: 50%;
17   }
18 }
19 
20 /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
21 @media screen and (max-width: 600px) {
22   .row {
23     flex-direction: column;
24   }
25 }


پنهان سازی عناصر با Media Querieها

استفاده رایج دیگر media queryها، برای مخفی کردن عناصر در صفحه نمایش‌های با اندازه‌های مختلف است.

من روی صفحه نمایش‌های کوچک مخفی خواهم بود.

مثال
1 /* If the screen size is 600px wide or less, hide the element */
2 @media screen and (max-width: 600px) {
3   div.example {
4     display: none;
5   }
6 }


تغییر اندازه قلم با Media Querieها

شما همچنین می‌توانید از media queryها برای تغییر اندازه قلم یک عنصر روی صفحه نمایش‌های مختلف با اندازه‌های متفاوت استفاده کنید:

مثال
 1 /* If screen size is more than 600px wide, set the font-size of <div> to 80px */
 2 @media screen and (min-width: 600px) {
 3   div.example {
 4     font-size: 80px;
 5   }
 6 }
 7 
 8 /* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
 9 @media screen and (max-width: 600px) {
10   div.example {
11     font-size: 30px;
12   }
13 }


گالری تصاویر منعطف

در این مثال، از media queryها به همراه flexbox برای ساخت یک گالری تصاویر واکنش گرا استفاده می‌کنیم.

مشاهدهٔ نتیجه »


وب‌سایت منعطف (به انگلیسی: Flexible)

در این مثال، از media queryها به همراه flexbox برای ساخت یک وب‌سایت واکنش گرا، شامل یک navigation bar منعطف و محتوای منعطف استفاده می‌کنیم.

مشاهدهٔ نتیجه »


جهت قرارگیری: عمودی / افقی

همچنین Media queryها می‌توانند برای تغییر چیدمان یک صفحه با توجه به جهت قرارگیری مرورگر استفاده شوند.

می‌توانید مجموعه ویژگی‌های CSS داشته باشید که تنها زمانی که پنجره مرورگر بزرگتر از ارتفاع آن باشد اعمال می شود، همان جهت Landscape :

مثال
1 @media only screen and (orientation: landscape) {
2   body {
3     background-color: lightblue;
4   }
5 }


کمترین عرض تا بیشترین عرض

همچنین می‌توانید از مقادیر (max-width: ..) and (min-width: ..) برای تنظیم کمترین میزان عرض و بیشترین میزان عرض استفاده کنید.

برای مثال، زمانی که عرض مرورگر بین ۶۰۰ و ۹۰۰ پیکسل است، ظاهر یک عنصر <div> را تغییر می‌دهد:

مثال
1 @media screen and (max-width: 900px) and (min-width: 600px) {
2   div.example {
3     font-size: 50px;
4     padding: 50px;
5     border: 8px solid black;
6     background: yellow;
7   }
8 }


استفاده از یک مقدار اضافی: در مثال زیر، می‌توانیم با یک کاما یک media query اضافه به media query قبلی خود اضافه کنیم (این کار همانند عملگر OR عمل خواهد کرد):

مثال
1 /* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
2 @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
3   div.example {
4     font-size: 50px;
5     padding: 50px;
6     border: 8px solid black;
7     background: yellow;
8   }
9 }


مرجع @media در CSS

برای یک مرور کامل همه انواع رسانه و امکانات/دستورات، لطفاً مرجع @media در مرجع CSS ما را مطالعه کنید.

نکته: برای یادگیری مطالب بیشتر در مورد طراحی واکنش گرای وب (چگونه دستگاه و صفحه نمایش‌های متفاوت را هدف قرار دهیم)، با استفاده از breakpointهای media query، آموزش طراحی وب واکنش گرای ما را مطالعه کنید.


منابع آموزشی