1、视区 (视图区)
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
width:控制视区宽度 可以将width设置为320这样固定的像素值 也可以设置
device-width关键字 表示设备的实际宽度
height: 控制视区高度，将height设置为固定值，也可以设置device-height,表示实际高度
initial-scale: 指定页面初始化缩放比例 可以设置为0.0 ~ 10数值
initial-scale=1.0 表示不缩放 等于理想视区 大于1 表示放大，小于1 表示缩小
maximum-scale ： 表示用户能够手动放大的最大比例 0.0~10数值范围
minimum-scale : 指定页面缩小的最小比例 一般不设置该属性
user-scalable：表示十分允许用户手动进行缩放 可以设置为no或yes no表示用户不能通过手势操作的方式进行对页面缩放
注意：
视区只对移动端浏览器有效，pc无效
对于移动端，某些属性也并不是完全支持，比如ios safari浏览器从10版本开始不支持user-scalable=no
物理像素和css像素:
像素(px) pixel 图像显示的基本单元 若干个像素组成
例如：1024*768 像素的图像 表示长1024个像素 宽768个像素
共计：1024*768 = 786432个像素组成
物理像素：设备屏幕实际拥有的像素主要和渲染硬件有关系
比如，iPhone 6的屏幕在宽边有750个像素，在长边有1334个像素，所以iPhone 6总共有750×1334个物理像素
css像素：也称为逻辑像素，逻辑像素在最终渲染到屏幕上时由相关系统转换为物理像素
设备像素比：一个设备的物理像素与逻辑像素之比，可以在JavaScript中使用window.devicePixelRatio获取该值
2、响应式布局
响应式布局 Responsive Layout 也称为响应式页面，一个网站可以兼容多个终端，主要由视区和媒体查询组成
2.1、媒体查询
根据设备屏幕特性套用指定css样式
以@media开头，指定媒体查询(设备类型) 然后指定媒体特性 使用and链接 大括号中写css样式
多个媒体类型和媒体特性使用逗号分开
@media 媒体类型 and (媒体特性) {
css样式
}
@media 媒体类型 and (媒体特性),媒体类型 and (媒体特性) {
css样式
}
媒体查询也可以直接定义在<link>标签中 并设置在media属性上
<link rel="stylesheet" media="媒体类型 and (媒体特性)" href="example.css" />
2.2、媒体类型
媒体类型是指定页面文件可以在不同媒体上显示出来，例如
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<style type="text/css">
@media screen
{
p {
font-size:14px;
}
}
@meida print
{
p {
font-size:10px;
}
}
</style>
<body>
<p>hello world</p>
</body>all : 所有设备
aural：用于语音和声音合成器
braille：用于盲文触摸式反馈设备
embossed：用于打印的盲人印刷设备
handheld：用于掌上设备或更小的设备，如PDA和小型电话（已废弃）
print：用于打印机和打印预览
projection：用于投影设备
screen：用于计算机屏幕、平板电脑、智能手机等
speech：用于屏幕阅读器等发声设备
tty：用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv：用于电视和网络电视
2.3、逻辑运算符
not 、 and 、 only
and 把多个媒体属性组合一个媒体查询 都成立时才执行
not 对一条取反
only 特定的某种类型
and运算符实例：
/* 基本的媒体查询，一个媒体属性和默认指定的all媒体类型*/
@media (min-width:700px){}
/* 如果仅应用于屏幕显示 并且满足宽度和横屏*/
@media screen (min-width:700px) and (orientation:landscape){}
/* 如果仅电视媒体 并且满足宽度和横屏*/
@media tv and (min-width:700px) and (orientation:landscape){}
not运算符实例：
排除某种指定的媒体类型 not必须置于查询的开头 并会对整条查询字符串生效
@media not all {}
@media not print and (min-width:700px) {}
only运算符用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。对支持媒体查询的浏览器来说，是否使用only表现都一样。但是，如果代码运行在不支持媒体查询的浏览器中，若不添加only就会出现异常，所以需要有only运算符来兼容
@media only screen and (min-width: 401px) and (max-width: 600px) {}
/* 在支持媒体查询的浏览器中等于*/
@media screen and (min-width: 401px) and (max-width: 600px) {}
媒体查询中使用多个条件时，可以使用逗号来分隔，等同于“逻辑或”，即当有一个条件成立时，这个媒体查询就会生效
/*如果想用于最小宽度为700像素或者横屏的手持设备上*/
@media screen (min-width:700px),handheld and (orientation:lanscape) {}
2.4、媒体属性
媒体属性用来设置限制具体的媒体查询的条件数值，大多数媒体属性可以带有min-或max-前缀，用于表达“最低”或者“最高”
例如，max-width:1000px表示应用媒体类型条件时最高宽度为1000px，大于1000px则不满足条件，就不会套用该媒体属性下的样式。如果没有对媒体属性指定值，且该属性的实际值不为0，则这个条件也是成立的
常用的媒体属性：
aspect-ratio：定义输出设备中页面可见区域宽度与高度的比例
color：定义输出设备每一组彩色原件的个数。如果不是彩色设备，那么值等于0
color-index：定义输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，那么值等于0
device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的比例
device-height：定义输出设备的屏幕可见高度，与视区viewport中的device-height相同
device-width：定义输出设备的屏幕可见宽度，与视区viewport中的device-width相同
grid：用来查询输出设备是否使用栅格或点阵
height：定义输出设备中页面可见区域的高度
max-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最大比例
max-color：定义输出设备每一组彩色原件的最大个数
max-color-index：定义输出设备的彩色查询表中的最大条目数
max-device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最大比例max-device-height：定义输出设备的屏幕可见的最大高度
max-device-width：定义输出设备的屏幕可见的最大宽度
max-height：定义输出设备中页面可见区域的最大高度
max-monochrome：定义在一个单色框架缓冲区中每个像素包含的最大单色原件个数
max-resolution：定义设备的最大分辨率
max-width：定义输出设备中页面可见区域的最大宽度
min-aspect-ratio：定义输出设备中页面可见区域宽度与高度的最小比例
min-color：定义输出设备中每一组彩色原件的最小个数
min-color-index：定义输出设备的彩色查询表中的最小条目数
min-device-aspect-ratio：定义输出设备的屏幕可见宽度与高度的最小比例
min-device-width：定义输出设备的屏幕可见的最小宽度
min-device-height：定义输出设备的屏幕可见的最小高度
min-height：定义输出设备中页面可见区域的最小高度
min-monochrome：定义在一个单色框架缓冲区中每个像素包含的最小单色原件个数
min-resolution：定义设备的最小分辨率
min-width：定义输出设备中页面可见区域的最小宽度
monochrome：定义在一个单色框架缓冲区中每个像素包含的单色原件个数。如果不是单色设备，那么值等于0
orientation：定义输出设备中页面可见区域高度是否大于或等于宽度。portrait表示竖屏，landscape表示横屏
resolution：定义设备的分辨率，如：96dpi、300dpi、118dpcm
scan：定义电视类设备的扫描工序
width：定义输出设备中页面可见区域的宽度。
使用最多：device-height、device-width、max-height、max-width以及orientation
/*当页面大于1200px时，pc端*/
@media (min-width: 1200px) {
body{
font-size:40px;
}
}
/* 像素在992 和 1199之间的屏幕 中等屏幕 分辨率低的pc*/
@media (min-width:992px) and (max-width:1199px) {
body{
font-size:30px;
}
}
/* 像素在768和991之间的屏幕 小屏幕 主要是pad*/
@media (min-width:768px) and (max-width:991px) {
body{
font-size:20px;
}
}
/* 像素在480和767之间的屏幕 超小屏幕 手机*/
@media (min-width:480px) and (max-width:767px) {
body{
font-size:16px;
}
}
/* 像素小于480的屏幕 更低分辨率手机*/
@meida (max-width:479px) {
body{
font-size:14px;
}
}