CSS3——响应式布局
1、视口（viewport）：是指浏览器不含标题栏区域的整个可视化窗口。也就是定义我们常见浏览器的宽度，高度，缩放比例等。
视口的属性：
width 设置视窗viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
此外，在安卓中还支持 target-densitydpi 这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素
target-densitydpi 值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
视口的具体使用：通过content设置属性，name规定视口，meta标签写。
1 <meta name="viewport" content="width=900,user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0" />
版权声明：本文为CSDN博主「csdn_gyh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/gaoyouhuang/article/details/82390885
2、媒体查询：为了解决不同终端设备之间页面交互问题，使用媒体查询可适应多个终端，从而不必设计多个页面来匹配各类型的终端。
2.1、媒体类型：现在使用一共5种
| 媒体类型（five kind） | |
| all | 用于所有设备 |
| handheld | 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
2.1、引入方式：法一、@media 媒体类型 { css样式 }
法二、<link rel = "stylesheet" hefl = ''''' media = "媒体类型">
2.3、媒体特性（功能）：css3对媒体类型的增强版【媒体功能可查询相应的文档：https://www.runoob.com/cssref/css3-pr-mediaquery.html】
语法：在css文件中：@media all and（媒体特性）and （媒体特性）{ css样式 }
例如： @media all and （mix-width=800px）{ css样式1 } //当屏幕宽度 在800px以上时使用css样式1
@media all and （mix-width=500px）and (min-width = 799){ css样式2 } //当屏幕宽度在500与799之间时使用css样式2
@media all and （max-width=499px）{ css样式3 } //当屏幕宽度在499之下是使用css样式3
特点：终端实现交互式响应，多终端使用，匹配多种不同的终端。代码累赘，重复代码使得内容作了大量相同的工作，使得响应速度变得很缓慢。
