CSS جستجوهای رسانه‌ای

CSS2 نوع‌های رسانه را معرفی کرد:

CSS2 معرفی کرد: @media قوانین، که ممکن است قوانین استایل مختلف برای نوع‌های مختلف رسانه‌ها را تعریف کند.

مثال: ممکن است شما یک مجموعه از قوانین استایل برای صفحه نمایش کامپیوتر داشته باشید، یک مجموعه از قوانین استایل برای پرینتر، یک مجموعه از قوانین استایل برای دستگاه‌های دستی و حتی یک مجموعه از قوانین استایل برای تلویزیون، و غیره.

不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向（平板电脑/手机处于横向还是纵向模式）
  • 分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

属性
@media 21.0 9.0 3.5 4.0 9.0

媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

您还可以针对不同的媒体使用不同的样式表：

CSS3 媒体类型

值 描述
all 用于所有媒体类型设备。
print پرنٹر کے لئے استعمال کیا جاتا ہے。
screen کمپیوٹر اسکرین، تبلٹ کمپیوٹر، اسمارٹ فون وغیرہ کے لئے استعمال کیا جاتا ہے。
speech صفحہ کو بڑی آواز سے پڑھنے والے اسکرین ریڈر کے لئے استعمال کیا جاتا ہے。

میڈیا کوئری کا ایک سادا مثال

میڈیا کوئری کا ایک طریقہ میں اسٹائل شیٹ میں ایک بجائی سی ایس ایس حصہ ہوتا ہے。

یہ نمونہ ویجت کی چوڑائی 480 پیکسل یا اس سے زیادہ ہونے پر پس منظر کی رنگ کو سبز چمکدار بنادیتا ہے ( اگر ویجت کی چوڑائی 480 پیکسل سے کم ہو تو پس منظر کی رنگ بنیادی چمکدار ہوگی):

مثال

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

امتحان کنید

یہ نمونہ نمائش دیکھاتا ہے کہ اگر ویجت کی چوڑائی 480 پیکسل یا اس سے زیادہ ہو تو اس منو کو پیج کی چمڑی پر چلایا جائے گا ( اگر ویجت کی چوڑائی 480 پیکسل سے کم ہو تو اس منو کو کانٹینٹ کی سر سے چلایا جائے گا):

مثال

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

امتحان کنید

مثال‌های بیشتر جستجوهای رسانه‌ای

برای دسترسی به مثال‌های بیشتر جستجوهای رسانه‌ای، لطفاً به صفحه بعدی بروید:مثال CSS MQ.

دستورالعمل CSS @media

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