-----------像素----------------

物理像素（设备像素）定义

分辨率：1792*828像素分辨率表示横向828个点，纵向1792个点--物理像素

实际开发使用CSS像素

CSS像素--实际开发中使用的像素

1.别名：逻辑像素/设备独立像素（与设备无关）

2.设备像素比dpr=物理像素/css像素（缩放比例是1的情况下）---同一方向

3.缩放改变的是css像素的大小--物理像素的大小不会改变

4.PPI（dpi）: 屏幕每英寸的物理像素点

-------------视口 viewport ------------

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缩放

像素、视口、媒体查询、响应式布局（栅格系统）、移动端屏幕适配