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

-----------像素----------------物理像素(设备像素)定义

分辨率：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.οnresize=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缩放

一般设计稿是i6为准，并且是放大一倍的，如果只是375的话，量的尺寸需要乘以2

i6的屏幕宽度是375，CSS像素是750个，因为一样大小的手机分辨率可能不一样，所以不能按物理像素，应该按CSS像素所以输出为750，750/18.75=40px=1rem