Media Queries: width

语法：

width：<length>

接受min/max前缀：是

取值：

<length>：
用长度值来指定页面可见区域宽度。不允许负值

说明：

定义输出设备中的页面可见区域宽度。
  • 与盒模型width不同，媒体特性width的取值只能是 <length>。
  • 本特性接受min和max前缀，因此可以派生出min-width和max-width两个媒体特性。

  • 简单列举几个应用示例：

    @media screen and (width){ … } @import url(example.css) screen and (width: 800px); <link media="screen and (min-width: 400px) and (max-width: 900px)" rel="stylesheet" href="example.css" /> <?xml-stylesheet media="not screen and (width: 800px)" rel="stylesheet" href="example.css" ?>

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 橙色 = 通过第三方工具支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-8 12+ 2-3 4-25 #1 3.1-3.2 #1 9 3.2-6.1 #1 2.1-4.3 #1 7+ 10+ 61 56 10-11 #1 11.4 4+ 1.2 7.12
9-11 #1 3.5+ 26+ 4-6 #1 9.5+ 7.0+ 4.4+
6.1+
  1. 使用width作为媒体查询条件，是包含滚动条在内的

示例：