引用外部样式使用link
你可能想针对将要显示页面的设备类型(桌面PC、笔记本电脑、平板电脑、手机或者甚至页面的印刷版本)来调整页面的样式，可以利用一个media属性，
在<link>元素中增加这个属性，只使用适用于指定设备的样式文件。
<link href="..." rel="stylesheet" media="screen and (max-device-width=480px)" /><link href="..." rel="stylesheet" media="print" />
查询中有很多属性可以使用，如依赖设备实际屏幕的大小(min-device-width、max-device-width)，使用浏览器窗口大小(max-width、min-width)，以及显示方向[orientation，这个可以时横向（landscape）或纵向（portrait）]，
此外还有很多其他的属性。可以根据需要为html增加多个<link>标记，涵盖你要支持的所有设备。
在css中增加媒体查询
要为CSS指定有特定属性的设备，还有一种方法：不是在link标记中使用媒体查询，还可以直接写在CSS中。
采用这种方式，@media规则中只包含特定于中媒体类型的CSS规则。在CSS文件中，要把对所有媒体类型都通用的规则放在@media规则下面，这样一来，就不会不必要的重复规则了。另外浏览器加载页面时，它会通过媒体类型来确定页面适用的规则，而将不匹配的规则忽略。
<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><link href="static/css/test.css" rel="stylesheet" media="screen and (min-width:1024px)" /> <link href="static/css/test.css" rel="stylesheet" media="screen and (max-width:1024px)" /> </head><body><div class="div_test">hello world！！！</div></body></html>
test.css样式文件:
@media screen and (min-width:1024px){.div_test{font-size:50px;font-family:'Times New Roman';font-style:oblique;color: #000000;background-color: #808080;margin:30px;padding:50px;padding-left:100px;border: dashed 1px #0cf60a;border-radius:5px;}}@media screen and (max-width:900px){.div_test{font-size:50px;font-style:oblique;background-color: #b6ff00;margin:30px;padding:50px;padding-left:100px;border: double 1px #0cf60a;border-radius:5px;}}
html：<link>标签中的media属性
定义和用法
media属性规定被链接文档将显示在什么设备上。
media属性用于为不同的媒介类型规定不同的样式。
media属性值 （所有浏览器都支持值）
screen print all
语法
<link media="value">
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的设备 } 大显示器
不知跬步，无以至千里；不积小流，无以成江海。菜鸟的梦想是雄鹰。
![[html] link标签的属性media有哪些值？都有什么作用？](https://1200zi.500zi.com/uploadfile/img/14/889/cfd714fbbd91544ce6b41738e636035d.jpg)
