CSS Media Queries – Examples
کوئریهای رسانهای CSS (Media Queries) چیست؟
کوئریهای رسانهای به شما اجازه میدهند تا **استایلها را بر اساس ویژگیهای دستگاه** مانند اندازه صفحه نمایش، وضوح تصویر، یا جهت صفحه اعمال کنید. این قابلیت برای طراحی واکنشگرا (Responsive Design) بسیار مهم است تا سایت شما در همه دستگاهها (موبایل، تبلت، دسکتاپ) به درستی نمایش داده شود.
—
✅ ساختار کلی
“`css
@media نوع-رسانه و (شرط) {
/* قوانین CSS اینجا نوشته میشود */
}
“`
—
📱 مثالهای رایج کوئری رسانهای
—
۱. هدفگیری دستگاههای موبایل (عرض صفحه تا ۶۰۰ پیکسل)
“`css
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
“`
✅ این کد برای اعمال استایل روی صفحههای کوچک مثل موبایلها استفاده میشود.
—
۲. هدفگیری تبلتها (بین ۶۰۱ تا ۹۰۰ پیکسل)
“`css
@media only screen and (min-width: 601px) and (max-width: 900px) {
body {
background-color: lightgreen;
}
}
“`
—
۳. هدفگیری دسکتاپها (۹۰۱ پیکسل به بالا)
“`css
@media only screen and (min-width: 901px) {
body {
background-color: lightgray;
}
}
“`
—
۴. حالت پرتره و منظره (Portrait vs. Landscape)
“`css
@media only screen and (orientation: portrait) {
body {
font-size: 16px;
}
}
@media only screen and (orientation: landscape) {
body {
font-size: 20px;
}
}
“`
—
۵. نمایشگرهای با وضوح بالا (مانند Retina)
“`css
@media only screen and (min-resolution: 192dpi) {
img.hi-res {
content: url(“images/hi-res.png”);
}
}
“`
—
۶. ترکیب چند شرط با هم
“`css
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
body {
background-color: coral;
}
}
“`
—
۷. حالت تاریک (Dark Mode)
“`css
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
“`
—
🛠️ نکات استفاده از کوئریهای رسانهای
* کوئریها را بهتر است در انتهای فایل CSS قرار دهید تا کد خواناتر باشد.
* از طراحی موبایل-اول (Mobile First) استفاده کنید؛ یعنی ابتدا استایلهای موبایل را بنویسید و سپس با کوئریها برای صفحات بزرگتر تنظیمات اضافه کنید.
* کوئریها را همراه با ویژگیهایی مثل flexbox یا grid ترکیب کنید تا طراحی واکنشگرای بهتری داشته باشید.
دیدگاهتان را بنویسید