@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
  1. IE8及更早浏览器不支持媒体查询。

@media示例:

原来这一切都是slideToggle搞的鬼,他是通过设置元素的内联样式让元素隐藏,这种方法设置的样式的优先级是三种方式中最高的,所以在CSS中设置的block根本没有用了。要解决这个问题...2016年10月10日

[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用...

前言现在HTML5/CSS3很流行罢,也是未来时代的趋势。在HTML5带来的许多实用功能之后,CSS3也同带来了一些牛逼哄哄的功能呢...2016年5月6日

[转载]使用CSS3 Media Queries实现网页自适应

网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页...2015年11月10日

MinWidthmediascreenand(mi...2015年6月6日

使用 CSS3 Media Queries 实现网页自适应

网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果。接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页...2014年12月11日

1.CSS3媒体查询的语法:mediascreenand(max-width:960px){};2.对于不支持媒体查询的浏览器比如:IE8以下的浏览器,要采用js来实现...2015年7月20日

eries是CSS3属性,它可以让你针对不同的终端(例如不同分辨率的屏幕)应用不同的css样式,例如通过MediaQueries你可以为移动端设置特有的样式,也可以设置打印版特有的样式。用法介绍法一...2015年5月29日

css3 Media Query IE6-8兼容问题

从名字看出来是自适应的兼容。打开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日

通过css3 Media Query实现响应式web设计

通过CSS3 Media Query实现响应式Web设计(2)2011-11-22 10:43来源...2014年10月24日

发布于2014-11-01 15:01:39一、关于Media Queries模块MediaQueries模块,该模块允许添加媒体查询表达式,用以指定媒体类型,然后根据媒体类型来选择用该使用的样式。二、三、关于safari由于safari在显示页面时是将...2014年11月1日