媒体查询：针对不同的媒体类型定义不同的样式！
基本语法
@media 媒体类型 关键字 and (媒体功能) {
/* CSS 样式 */
}
关键字
only：指定某种指定的媒体类型，可以用来排除不支持媒体查询的浏览器。
not：排除某种指定的媒体类型。
常见的媒体类型
1.screen:用于电脑屏幕，平板电脑，智能手机
2.speech:应用于屏幕阅读器等发声设备
3.all:用于所有设备
常见的媒体功能
1.max-定义输出设备中网页最大的可见区域宽度
2.min-定义输出设备中网页最小的可见区域宽度
3.max-height:定义输出设备中网页最大的可见区域高度
4.min-height:定义输出设备中网页最小的可见区域高度
5.device-height 定义输出设备的屏幕可见高度。
6.device-width 定义输出设备的屏幕可见宽度。
7.max-device-height 定义输出设备的屏幕可见的最大高度。
8.max-device-width 定义输出设备的屏幕最大可见宽度。
9.orientation 检测设备目前处于横向还是纵向状态。
用法案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max- 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min- 540px) and (max- 969px) {
body {
green;
}
} */
@media screen and (min- 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min- 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */
</style>
</head>
<body>
</body>
</html>
针对实际比较常见的尺寸设置
以下仅仅列举了部分常见的屏幕尺寸，但是也实现大于、小于、等于的设置。
/* 屏幕尺寸大于960px时（普通彩色屏幕） */
@media only screen and (min-960px){ }
/* 屏幕尺寸小于1440px时 */
@media only screen and (max-1440px){ }
/* 屏幕尺寸大于960px而小于1920px */
@media only screen (min- 960px) and (max- 1920px){ }
/* 屏幕大于2000px时（MAC) */
@media only screen and (min-2000px){ }
/* 当设备可视宽度小于480px (iphone)*/
@media only screen and (max-device-480px){ }
/* 当设备可视宽度等于768px时 (iPad) */
@media only screen and (device-768px){ }
/* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
@media only screen and (min-device- 481px) and (max-device- 1024px) and (orientation:portrait) { }
/* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
@media only screen and (min-device- 481px) and (max-device- 1024px)
由于css的样式覆盖问题，所以在实际设置的时候，如果同一个元素需要设置几个不同尺寸的问题，就需要注意一下顺序问题，
比如：min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面。
rem,em二者
1.rem
(1)
简介
相对于根元素 HTML 的 font-size 计算值的大小。
(2) 换算
如果设置 font-size 为 14px，则 rem = 设计稿实际尺寸 ÷ 14。
例：设计稿宽度为 42px，高度为 35px，换算成 rem 为：
42 ÷ 14 = 3rem，35 ÷ 14 = 2.5rem
如果 css 里没有设定 html 的 font-size，则默认浏览器以 1rem = 16px 来换算。
2. em
(1)
简介
相对于父元素的 font-size 计算值的大小。
(2)
换算：同 rem
九、逻辑像素、物理像素
1. 逻辑像素
逻辑像素的单位是 pt，它是按照内容的尺寸计算的单位。比如 iPhone 4 的逻辑像素是
480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍，即 1pt=2px，那么其
实 iPhone 4的物理像素是960x640px。iOS 开发工程师和使用 Sketch 和 AdobeXD 软
件设计界面的设计师使用的单位都是 PT。
2. 物理像素
物理像素的单位是 px，它是我们在 Photoshop 和切图中使用的单位，屏幕设计中最
小的单位就是 1px 不可再分割。使用 Photoshop 设计移动端界面和网站的设计时使用的单
位是 PX。在以下的文章中，如果你使用 Photoshop 设计界面，那么只需要记住所有 px 单
位的数值和支持 Photoshop 的工具，如果使用 Sketch 或 Adobe XD 设计界面，那么只
需要记住所有 pt 单位的数值和对应的工具即可。
3. 计算方式
PPI(Pixels Per Inch)指的是屏幕分辨率的单位，表示的是每英寸显示的像素密度。屏
幕的 PPI 值越高，那么这个屏幕每英寸能容纳的像素颗粒也就越多，那这个产品的画面的
细节度也就越丰富。PPI 值大于 300 一般我们就无法用肉眼察觉出屏幕上的「马赛克」格
子了。但是如果屏幕很大，那么需要呈现视网膜屏的 PPI 值也需要更大，所以 iPhone Plus
系列的 PPI 值比 iPhone6/7/8 要大。PPI 在我们设计的工作中其实关系不大，但理解它
对于帮助我们理解为什么 iPhone4 比 iPhone3GS 实际像素大一倍有帮助。
PPI=√（X^2+Y^2）/ Z
（X：长度像素数；Y：宽度像素数；Z：屏幕大）