CSS3响应式布局
一、media-Css3响应式
媒体类型:
all 所有媒体
screen 彩屏设备
print 用于打印机和打印预览
speech 应用于屏幕阅读器等发声设备
braille 应用于盲文触摸式（已废弃 ）
embossed 用于打印的盲人印刷设备（已废弃 ）
projection 用于投影设备（已废弃 ）
tty 不适用像素的设备（已废弃 ）
tv 电视（已废弃 ）
关键字:
and not 用来排除某种制定的媒体类型
only (限定某种设备)某种特定的媒体类型
媒体特性:
(width:600px) 宽
(max-width:600px) 最大宽度 <=600
(min-width: 480px) 最小宽度 >=480
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
二、Css3响应式布局
方式一：媒体查询：@media [not|only] mediatype [and] (media feature) { CSS-Code; }
例： @media screen and (min-width:400px) and (max-width:500px) { .box {margin: 0 auto;} }
//值与值之间需要有空格，and前后也要有空格
方式二：@import url('index.css') [not|only] mediatype [and] (media feature) [and] (media feature); 需顶行写
例：@import url("css/reset.css") screen;
方式三：样式引入
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="B.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="C.css" media="screen and (max-width:600px)">
<link rel="stylesheet" type="text/css" media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel="stylesheet" type="text/css" media=”all and (orientation:landscape)”href=”landscape.css”>
三、viewport-Css3响应式
<meta name="viewport" content="" />
视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
width [pixel_value | device-width] 例如: width = 640
height [pixel_value | device-height]
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
user-scalable 是否允许缩放 （yes || no 或 1 | 0）
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
<meta http-equiv="X-UA-Compatible" content="IE=edge">
此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档
emmet快捷键：meta:compat
来源：https://www.cnblogs.com/ttxs-cn/p/7944268.html