-----------像素----------------
物理像素（设备像素）定义
分辨率：1792*828像素分辨率表示横向828个点，纵向1792个点--物理像素
实际开发使用CSS像素
CSS像素--实际开发中使用的像素
1.别名：逻辑像素/设备独立像素（与设备无关）
2.设备像素比dpr=物理像素/css像素（缩放比例是1的情况下）---同一方向
3.缩放改变的是css像素的大小--物理像素的大小不会改变
4.PPI（dpi）: 屏幕每英寸的物理像素点
-------------视口 viewport ------------
1.标签：<meta name="viewport" content="=width=device-width，initial-scale=1，user-scalable=no，maximum-scale=1,minimum-scale=1"/>-----标准写法
2.content：="=width=device-width"----视口自动调整匹配设备宽度
" initial-scale=1"缩放---相当于上面的自动匹配宽度
建议都写避免浏览器兼容问题
3.user-scalable=no/yes | 是否允许用户缩放---一般为no，避免打断布局
maximum-scale=1,minimum-scale=1与上面含义相同，建议都写避免兼容问题
4.获取视口宽度js获取方法
window.innerWidth
document.documentElement.clientWidth
document.documentElement.getBoundingClientRect()
screen.width---不建议，兼容问题
5.dpr 设备像素比js获取方法
window.devicePixelRatio
--------------媒体查询-------------------
为什么需要媒体查询---一套样式不能适应不同的屏幕大小,需要针对不同的大小屏幕去写样式
媒体查询格式------ @media 媒体类型 逻辑（条件表达式）{ 选出来再操作 }
媒体类型：不写默认是all(所有类型）/// screen屏幕 /// print打印设备 /// speech屏幕阅读器（残障人士专用）
逻辑：and（与）/// ，（或） /// not（非）
媒体查询 的条件表达式如图（选中的常用）
landspscape 横屏
portrait 竖屏
例子1：
@media screen and ( min-width : 900px ) and ( max-width : 1200px ) { 屏幕宽度 >= 900px , <= 1200px的设备单独设置样式 }
例子2：如果不指定查询的媒体类型，默认是all 所有类型
@media ( min-width : 900px ) and ( max-width : 1200px ) { } 不指定媒体类型的情况下，@media后直接跟条件表达式即可，因为不需要判断用户的设备类型。
--------------------------媒体查询之策略（案例）----------------------
设置断点，根据用户屏幕设置不同样式
方法1、具体设置，如 （最小400px）and（最大600px）........
方法2、pc端优先，先统一设置最大屏幕对应的图片宽度，再层层设置最大宽度的断点。利用的是css由上到下执行的机制，满足条件就覆盖上一层css样式
方法3、移动端优先，思路与pc端一样，只是出发点不同，先统一设置最小屏幕对应的图片宽度，再层层设置最小宽度的断点。
-------------移动端常用单位------------------
px像素大小
em 相对自己的font大小 ----font-size:12px; height:5em; 那么高就等于5*12=60px，因为太麻烦复杂一般不使用，除了文章首行缩进
rem 相对根节点(html)的font大小,即html{ font-size:12px;} 之后整个文档的rem都会根据这个12px来进行计算rem
vw 相对视口宽度比例 1vw是视窗宽度的1%
vh 相对视口高度比例 1vh是视窗高度的1%
视口宽度用JS获取,根据用户屏幕大小，修改html的字体大小 从而动态调整布局宽高
用px/em做单位，每次都要用js---修改，不能统一修改
统一修改方法：
我们假设 1rem=20px; --> 屏幕宽375px
height=50/20=2.5rem
1rem=40px; --> 屏幕宽750px
height=100/40=2.5rem
得出： 1rem=(?/375)*20px=屏幕宽度
1rem = (document.documentElement.clientWidth / 375) * 20px;
实例Js：
setRemUnit(); //运行一次函数
window.onresize=setRemUnit; //屏幕缩放一次就运行一次函数
function setRemUnit(){
var docEl=document.documentElement; //获取到根节点，就是html
var viewWidth=docEl.clientWidth; //获取到视口宽，没有做兼容，百度一下兼容性问题
docEl.style.fontSize=viewWidth/375*20+'px' //把html的字体宽度改变，所以全局的rem都会跟着改变
}
rem总结：
1. rem与html的字体大小是对应的，如果1rem=20px，那么就需要设置html的字体大小为20px；
2. 如果设计稿是375px宽的，我们指定该宽度下1rem=20px，那么设计稿上40px的元素，就是2rem。也就是说，在写页面的时候，要指定设计稿对应的页面内，1rem等于多少px，然后参考设计稿去计算元素是多少rem。当页面不是375px宽时，就需要根据页面的实际宽度来动态设置html的字体大小，这样元素就会跟随视口的宽度来进行缩放了。
----------------响应式布局--------------
对不同屏幕尺寸大小做出相应，并进行响应布局的一种移动web开发方式，媒体查询设置断点进行不同的布局效果
-------------------栅格系统(看文件夹案例)-------------------------
栅格系统，把页面或者版心等容器分为固定（12/16格等），屏幕缩小时，结构需要占用更多栅格；屏幕变大时，结构需要占用栅格变少
-------------------------移动端屏幕适配---------------------------
源码：https://class.imooc.com/course/1006
简单适配原理
通用适配原理：添加部分，主要解决不同设备像素比下，边框会变粗，因为放大屏幕，1px物理像素会占据更多css像素
还需要设置不同设备像素比下的body、input、a的字体大小，因为dpr是2的情况下，1css像素=2物理像素（肉眼看到的），所以需要根据dpr缩放
