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的设备 }  大显示器​