在link中使用（独立的css文件）

比如一个页面在屏幕中使用无衬线字体，而在打印时使用衬线字体，screen和print时两种已定义的媒体类型
@media screen and (max-width:768px){}

<link rel="stylesheet" type="text/css" media="screen" href="screen-style.css">

横向
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">

非纵向放置的显示屏设备加载样式文件
<link rel="stylesheet" media="not screen and (orientation:portrait)" href="portrait-screen.css">

视口宽度大于800像素的显示屏设备才能加载文件
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px)" href="800wide-portrait-screen.css">

查询列表中的任意一个查询为真，则加载文件。全部查询都不为真，则不加载
<link ref="stylesheet" media="screen and (orientation:portrait) and (min-width:800px), projection"
href="800wide-portrait-screen.css" />
第一，媒体查询之间使用逗号分隔。第二，你会注意到在projection之后，没有and，也没有任何特性/值的组合。没有后续表达式，意味着只要是projection就满足条件。本例中，样式会应用于所有的投影仪

2.css 文件中使用

@media screen and (max-device-width:400px){
    h1 {color:green;}
}

3.@import 会增加http请求，所以慎用

@import url("phone.css") screen and (max-width:360px);

4.检测那些特性

width：视口宽度
device-width：屏幕宽度
orientation：横向还是纵向
aspect-ratio:视口高度比16：9的显示屏定义为 aspect-ratio:16/9
devcie-aspect-ratio:与aspect-ratio类似
color:每种颜色的位数，16会检测设备是否拥有16位颜色

都可以配合min和max前缀，min-width max-device-width

5.不需要分开多个文件

1.不好维护
2.需要增加http请求数量

所以还是把@media写在同一个css文件中就行了，容易写