html：<link> 标签中的 media 属性

html：<link> 标签中的 media 属性 HTML <link> 标签的 media 属性 定义和用法

media 属性规定被链接文档将显示在什么设备上。

media 属性用于为不同的媒介类型规定不同的样式。

media属性值 （所有浏览器都支持值）

screen

print

all

语法

<link media="value">​

值 描述 screen 计算机屏幕（默认）。

tty 电传打字机以及类似的使用等宽字符网格的媒介。

tv 电视机类型设备（低分辨率、有限的滚屏能力）。

projection 放映机。

handheld 手持设备（小屏幕、有限带宽）。

print 打印预览模式/打印页面。

braille 盲人点字法反馈设备。

aural 语音合成器。

all 适用于所有设备。

CSS3 @media 查询 CSS 语法

@media mediatype and|not|only (media feature) {

    CSS-Code;

}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

  .class {

    background: #ccc;

  }

}

总结：顺序不能反

@media (max-width: 767px)  { ... col-xs-3... }  { //<=767的设备 }  手机

@media (min-width: 768px)  { ... col-sm-3... }  { //>=768的设备 }  平板

@media (min-width: 992px)  { ... col-md-3...}   { //>=992的设备 }  电脑

@media (min-width: 1200px) { ... col-lg-3...}  { //>=1200的设备 }  大显示器​