مدیا کوئری‌ها به شما این امکان را می‌دهند که استایل‌های CSS را بر اساس ویژگی‌های دستگاه مثل اندازه صفحه نمایش، جهت (افقی یا عمودی)، و رزولوشن اعمال کنید. در اینجا چند مثال دقیق‌تر از استفاده از مدیا کوئری‌ها برای ایجاد طرح‌های واکنش‌گرا برای دستگاه‌های مختلف آورده شده است.
مثال ۱: تغییر رنگ پس‌زمینه
در این مثال، رنگ پس‌زمینه 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;
}
}مثال ۲: مدیا کوئری برای منوها
در این مثال، یک منوی واکنش‌گرا ایجاد می‌کنیم که طراحی آن بر اساس اندازه صفحه نمایش تغییر می‌کند.
/* کانتینر منو ناوبری */
.topnav {
overflow: hidden;
background-color: #333;
}
/* لینک‌های منو ناوبری */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* برای صفحه‌هایی با عرض 600 پیکسل یا کمتر، لینک‌های منو به جای کنار هم بودن، روی هم قرار می‌گیرند */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}مثال ۳: مدیا کوئری برای ستون‌ها
در این مثال، یک طرح انعطاف‌پذیر با ستون‌های مختلف ایجاد می‌کنیم که تعداد ستون‌ها با توجه به اندازه صفحه نمایش تغییر می‌کند.
/* ایجاد چهار ستون برابر که کنار هم قرار می‌گیرند */
.column {
float: left;
width: 25%;
}
/* برای صفحه‌هایی با عرض 992 پیکسل یا کمتر، ستون‌ها به دو ستون تغییر می‌کنند */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* برای صفحه‌هایی با عرض 600 پیکسل یا کمتر، ستون‌ها روی هم قرار می‌گیرند */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}مثال ۴: استفاده از Flexbox به همراه مدیا کوئری
یک روش مدرن‌تر برای ایجاد طرح‌های ستونی استفاده از Flexbox است.
/* کانتینر برای Flexbox */
.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 به 80px تنظیم می‌شود */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* اگر اندازه صفحه 600 پیکسل یا کمتر باشد، اندازه فونت div به 30px تنظیم می‌شود */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}این مثال‌ها نشان می‌دهند که چگونه می‌توانید با استفاده از مدیا کوئری‌ها، سایت خود را واکنش‌گرا و سازگار با دستگاه‌های مختلف کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام