@media
- 版本：CSS2/3
@media定义和用法
@media：<media_query_list>
<media_query_list>：[<media_query>[',' <media_query>]*]?
<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
<expression>：'('<media_feature>[:<value>]?')'
@media属性值
- <media_type>：
- 指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)
- <expression>：
- 指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)
@media说明
- IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。
-
媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。
示例代码：
@media screen and (width:800px){ … } @import url(example.css) screen and (width:800px); <link media="screen and (width:800px)" rel="stylesheet" href="example.css" /> <?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?> -
列举几种使用方式：
@media all and (width:1024px){ body{color:#f00;} } @media all and (device-height:800px){ … } @media all and (orientation:landscape){ … } @media all and (device-aspect-ratio:16/10){ … } @media all and (min-color:1){ … } @media all and (monochrome:0){ … } @media all and (grid:0){ … }
兼容性(指定媒体类型)：
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
| IE | Firefox | Safari | Chrome | Opera |
|---|---|---|---|---|
| 6.0-8.0 #1 | 4.0 | 4.0 | 4.0 | 15.0 |
| 9.0 |
- IE8及更早浏览器不支持媒体查询。
@media实例
原来这一切都是slideToggle搞的鬼，他是通过设置元素的内联样式让元素隐藏，这种方法设置的样式的优先级是三种方式中最高的，所以在CSS中设置的block根本没有用了。要解决这个问题...2016年10月10日
![[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用...](http://simg.s.weibo.com/gs1_12872620946981921473.jpg)
前言现在HTML5/CSS3很流行罢，也是未来时代的趋势。在HTML5带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢...2016年5月6日
![[转载]使用CSS3 Media Queries实现网页自适应](http://simg.s.weibo.com/gs1_1834595327855259118.jpg)
网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页...2015年11月10日
网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页...2014年12月11日
1.CSS3媒体查询的语法：mediascreenand(max-width:960px){}；2.对于不支持媒体查询的浏览器比如：IE8以下的浏览器，要采用js来实现...2015年7月20日
eries是CSS3属性，它可以让你针对不同的终端（例如不同分辨率的屏幕）应用不同的css样式，例如通过MediaQueries你可以为移动端设置特有的样式，也可以设置打印版特有的样式。用法介绍法一...2015年5月29日
从名字看出来是自适应的兼容。打开IE看了一下，效果挺好的，自适应的效果挺好的。Respond.js让不支持css3MediaQuery的浏览器包括IE6-IE8...2015年9月20日
web开发人员需要确保他们的网站在不同的设备上都能良好展现。在显示时的一个重要手段就是为不同的设备应用不同的CSS规则...2014年11月23日
发布于2014-08-26 16:04:30CSS3 Media Queries 模板：1...2014年8月26日
发布于2014-12-04 14:10:50@media only screen and (-webkit-min-device-pixel-ratio: 1.3),only screen and (min--moz-device-pixel-ratio: 1.3),only screen and (min-resolution: 200dpi) { }WebKit最小像素比...2014年12月4日
发布于2014-11-01 15:01:39一、关于Media Queries模块MediaQueries模块，该模块允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择用该使用的样式。二、三、关于safari由于safari在显示页面时是将...2014年11月1日