Media Queries

Main Page Tutorial
موارد آموزشی
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، آموزش طراحی وب واکنش گرای ما را مطالعه کنید.

صفحهٔ بعد»

«صفحهٔ قبل