H5笔记-04

day14，
一、媒体查询
媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式
@media 设备类型 and (设备特征){
div{ width:300px;height:300px;}
}
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href="…/css/pad.css" media=“screen and (max-width:1024px) and (min-width:720px)”>
dpr > 1 高清屏
dpr = 1 普通屏

vw: 参照视窗宽度 1vw = 视窗宽度的1%
vh: 参照视窗高度 1vh = 视窗高度的1%
vmin: 取视窗宽度和视窗高度中最小的值
1vmin = 视窗宽度的1%或者视窗高度的1%
vmax: 取视窗宽度和视窗高度中最大的值
1vmin = 视窗宽度的1%或者视窗高度的1%

vw、vh与百分比区别
1、% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
2、vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的

等比缩放布局
1、rem+js
2、rem+vw
3、flexible.js

em、rem与vw区别
1、em参照父元素字体大小
2、rem参照根元素字体大小
3、vw参照视窗宽度 1vw = 视窗宽度的1%

五大浏览器内核、代表作、前缀
Prosto opera -o-
Trident `IE -ms-
Gecko 火狐 -moz-
Webkit safari -webkit-
Blink 谷歌 -webkit-