基础知识
像素相关的：
分辨率物理像素（physical pixel）也叫设备像素（dp：device pixel）CSS像素也叫逻辑像素（logical pixel）也叫独立设备像素（dip：device independent pixel）设备像素比（dpr）（device pixel ratio）标清屏和高清屏缩放PPI/DPI1、分辨率
1792 X 828像素：垂直方向1792个点、水平828个点
2、物理像素
分辨率的一个点就是一个物理像素，实际开发中不是以物理像素为准
3、CSS像素
实际开发中使用的像素
.container {width: 200px;// css像素}
CSS像素和物理像素的联系 在标清屏（standard）中，一个css像素对应的是一个物理像素在高清屏（Retina）中，一个css像素对应的是四个物理像素四个物理像素代替一个物理像素去描述事物，所以高清屏幕的高分辨率效果更好
4、设备像素比
dpr：device pixel ratiodpr = 设备像素 / css像素（缩放比是1的情况下，即不缩放）水平方向或者垂直方向的比率上述标清屏幕一个css像素是一个物理像素，所以dpr=1上述高清屏幕一个css像素是4（2x2）个物理像素，所以dpr=2/1=2dpr = 2表示一个css像素用2x2个设备像素来绘制
5、标清屏和高清屏
标清屏幕dpr=1高清屏幕dpr>=2
6、缩放
缩放的是css像素比如放大至2倍，原来1x1的方块变成了2x2，视觉效果放大2倍，对应的物理像素也变成了2x2，那么一个css像素 = 2x2物理像素同理缩放0.5倍，四个css像素 = 1一个物理像素
7、PPI/DPI
表示每英寸屏幕中物理像素的点，来表示物理像素密度PPI: pixels per inchDPI: dots per inchPPI是可以计算出来的：
例如一个手机是6.1英寸（对角线），1792 X 828像素分辨率
那么就可以根据勾股定理算出对角线的像素个数为n
ppi = 6.1 / n = 326ppi
视口
现象：如果用PC网页手机模式预览，那么会造成网页缩放严重，无法进行正常操作原因：因为原PC网页宽度至少为980px，变成手机模式的三百多像素时候，会强制进行缩放，那么各模块的宽度就会变很小解决方案：在html中加入viewport声明，根据设备宽度自适应：// 写法一：可以进行宽度指定<head><meta name="viewport" content="width=device-width"></head>// 写法二：指定缩放比例为1，即不缩放<head><meta name="viewport" content="initial-scale=1"></head>// 为了兼容不容浏览器，最好写法一和写法二都写上，// user-scalable=no, maximum-scale=1, minimum-scale=1不允许用户缩放// 微信内置浏览器生效，即使这样声明不可以缩放，国外很多浏览器还认为用户是可以是缩放的<head><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"></head>
怎样获取设备的宽度？
// 方法一window.innerWidth;// 方法二document.documentElement.clientWidth;// 方法三document.documentElement.getBoundingClientRect().width// 浏览器兼容写法window.innerWidth || document.documentElement.clientWidth || document.documentElement.getBoundingClientRect().width
怎样获取设备的dpr？
window.devicePixelRatio;
box-sizing
PC端由于浏览器兼容性一般不使用这个属性两个值content-box、border-box如果设置为content-box，那么描述的宽高是内容宽高，如果加上padding或者border属性，那么就会往外扩张，会影响原始布局如果设置为border-box，那么描述的宽高是加上padding和border的宽高，如果使用padding或border，内容就会往里压缩，不会影响原始布局图标字体
可操控的图标，可以理解为和字体属性很像的图标库阿里巴巴字体图标库：链接媒体查询
什么是媒体查询
作用：媒体查询是查询屏幕类型和屏幕大小示例：如果屏幕宽度超过900像素，就把北京颜色设置为red// 如果是浏览器页面并且宽度大于900px，那么背景颜色就为红色@media screen and (min-width:900px){body{background-color: red;}}
为什么要媒体查询
一套样式不可能适应各种大小的屏幕根据屏幕的大小写样式让我们的页面在不同大小的屏幕上都能显示媒体的类型
all：默认的类型，表示所有的screen：浏览器页面print：打印页面，ctrl+p打印的时候判断speech：针对残障人士设计的，这个一般接触不到// 表示在打印页面上，如果宽度超过900就会变红@media print and (min-width:900px){body{bgcolor:red;}}
媒体查询中的逻辑
与（and）或（，）非（not）// 宽度介于1024和900之间会变红@media screen and (min-width: 900px) and (max-width: 1024px){body{bgcolor: red;}}// 宽度大于1024或者屏幕为浏览器屏幕并且宽度大于900会变红// , 的优先级高于and@media screen and (min-width: 1024px), (max-width: 900px){body{bgcolor: red;}}// 屏幕为浏览器屏幕并且宽度大于1024或者屏幕为浏览器屏幕并且宽度大于900会变红// , 的优先级高于and@media screen and (min-width: 1024px), screen(max-width: 900px){body{bgcolor: red;}}// not和and放在一起使用，等于not (screen and (min-width: 1024px) and screen(max-width: 900px))@media not screen and (min-width: 1024px) and screen(max-width: 900px){body{bgcolor: red;}}
媒体特征表达式
1、获取宽度监听：width/max-width/min-width
2、获取DPR监听：-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
3、获取横屏还是竖屏：orientation：landscape横屏/portrait竖屏
4、监听高度，一般用不到：height
5、监听设备宽高，一般用不到：device-width/device-height screen.width/screen.height
6、监听视口的宽高比：aspect-ratio
媒体查询-策略
策略是指对不同屏幕的布局策略，可以理解为利用media对窗口的监听，从而使用不同的布局方式进行适配根据不同的宽度进行断点区域划分断点怎么来的？改变屏幕大小，当页面显示不正常时候，就需要设置断点了写的原则，可以是PC first 也可以是mobile first断点区域列表，根据测算出来： xs: < 576pxsm: 576px - 768pxmd: 768px - 1200pxxl: > 1200px
移动端的常用单位
px/%/em/rem/vw/vh
em：根据自身的fontsize大小，移动端并不常用，首行缩进的时候可以考虑用到，缩进2emrem：root em，用的比较多，用来统一布局，统一缩放vw：视口宽度的百分之1vh：视口高度的百分之1
// 实现布局随着窗口大小统一缩放setRemUnit();window.onresize = setRemUnit;function setRemUnit(){var docEL = document.documentElement;var portWidth = docEL.clientWdith;docEL.style.fontSize = portWidth / defaultWidth * defaultFontSize + “px”;}
FLEX布局(弹性布局)
flixible Boxflex容器：使用display： flex就是flex容器项目：flex容器中的子元素就是项目，不包括孙子元素默认主轴方向排列，即横向Flex-容器的属性
1、display属性
作用：指定flex属性取值：flex | inline-flexflex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度
2、flex-direction
作用：指定容器的主轴方向，主轴默认为水平向右方向，项目排列的方向取值：row | row-reverse | column | column-reverserow：默认值，主轴横向往右排列row-reverse：主轴横向往左反向排列column：垂直方向排列volumn-reverse：垂直方向反向排列
3、flex-wrap
作用：描述如果一个轴线排列不下，如何换行取值：nowrap | wrap | wrap-reversenowrap：默认不换行，会压缩子元素wrap：换行，第一行在上方wrap-reverse：换行，第一行在下方
4、flex-flow
作用：是flex-direction和flex-wrap和合并缩写形式取值：flex-direction || flex-wrap
// 下方写法一和写法二效果一样：// 写法一.box {flex-flow: row wrap;}// 写法二.box {flex-direction: row;flex-wrap: wrap;}
5、justify-content属性（justify单词的意思是两端对齐）
作用：属性定义了项目在主轴上的对齐方式取值：flex-start | flex-end | center | space-between | space-aroundflex-start：默认的是从主轴开始位置对齐flex-end：默认的是从主轴结束位置对齐center：居中对齐，项目形成的总宽度不变space-between：两端对齐，中间间隔宽度一样space-around：所有项目的两侧间隔相等，主轴两端会留边
6、align-items属性
作用：定义交叉轴上的堆砌方式取值：flex-start | flex-end | center | baseline | stretchflex-start：交叉轴的开始位置对齐flex-end：交叉轴的结束位置堆砌center：交叉轴居中baseline：基线对齐，文字第一行对齐stretch：（单词意思是弹性、拉伸）默认值！！如果项目未设置高度或者设置为auto，将沾满整个容器的高度（自动填充）
7、align-content
作用：定义了交叉轴线上的对齐方式说明：如果项目只有一个轴线（一行），该属性不起作用，如果wrap换行了，那么才有作用取值：flex-start | flex-end | center | space-between | space-around | stretchflex-start：所有轴线都是从头开始，交叉轴开始位置开始，主轴横轴的话，就是上对齐flex-end：从尾开始，交叉轴结束位置开始center：所有从中间开始space-between：多条轴线上下两端对齐space-around：多条轴线上下两端分散对齐，上下两侧留白stretch：默认!高度自动填充拉伸
Flex-项目的属性
项目的属性规定的是项目在flex容器中的属性orderflex-growflex-shrinkflex-basisflexalign-self1、order
作用：定义项目的排列顺序取值：integer
2、flex-grow
作用：定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大取值：> 0默认值为0，默认不会自动放大如果都设置为1，那么所有项目会平分剩余的空间如果有三个元素，一个设置为2，剩余为1，那么项目2的就会占一半，剩下两个会各占四分之一。如果有三个元素，一个width设置为200，剩余都为1，那么剩余的会平分固定宽度200之外的空间
3、flex-shrink
作用：定义项目的缩放比例，和grow相反取值：>0默认值为1，默认会自动缩小如果所有项目都为1，当空间不足时候，都会等比例缩小如果有一个项目为0，其他都为1，当空间不足时候，0不变，1都缩小
4、flex-basis
作用：定义分配多余空间之前，项目占据的主轴空间，和width差不多，但是比width优先级高
5、flex
作用：flex-grow、flex-shrink、flex-basis的简写默认值：0 1 auto
6、align-self
作用：允许项目有和其他项目不一样的对齐方式，可以覆盖父元素的align-items属性取值：和align-items多了个auto默认值为auto，表示继承align-items属性
![移动端布局三种视口_移动端开发知识[系列] - 视口viewport](https://900zi.500zi.com/uploadfile/img/14/810/2e0f16fe4f509ccee6376b3ade6ea941.jpg)
