视口
先看这里-> www.cnblogs.com/yuduxyz/p/9…
总结一下：
什么叫视口?
- 在pc端，视口指的就是浏览器的可视区域，其宽度与浏览器窗口的宽度保持一致。而在移动端，视口有三个，分别是布局视口、视觉视口和理想视口。
- 布局视口默认为980px,css根据这个进行布局；视觉视口是用户能看到的部分，可进行缩放，不会影响布局视口；理想视口就是最理想的布局视口的尺寸使得用户无需缩放就能得到最理想的页面效果，其值等于屏幕分辨率的值（屏幕分辨率：纵横向上的物理像素点数）
为什么要设置视口?
移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。
因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。
如何设置视口?
最常用的设置：
<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no' />
其他属性设置举例（三个scale可设置的范围为[0,10])：
<meta name='viewport' content='width=device-width,height=device-height,initial-scale=1,minimum-scale=0,maximum-scale=10,user-scalable=yes' />
像素
物理像素（physical pixel）
手机屏幕上显示的最小单元，该最小单元具有颜色及亮度的属性可供设置。（屏幕上有多少个发光二极管）
设备独立像素（density-indenpendent pixel）
此为逻辑像素，计算机设备中的一个点，css 中设置的像素指的就是该像素。老早在没有 retina 屏之前，设备独立像素与物理像素是相等的。
设备像素比（device pixel ratio）
设备像素比(dpr) = 物理像素/设备独立像素。如 iphone 6、7、8 的 dpr 为 2，那么一个设备独立像素便为 4（2的2次方，因为宽高都变成2倍） 个物理像素，因此在 css 上设置的 1px 在其屏幕上占据的是 2个物理像素，0.5px 对应的才是其所能展示的最小单位。这就是 1px 在 retina 屏上变粗的原因，目前有很多办法来解决这一问题。
设备像素比可以通过 window.devicePixelRatio 来获取，或者使用 CSS 中的 device-pixel-ratio。
下面是常见的设备像素比：
普通密度桌面显示屏：devicePixelRatio = 1
高密度桌面显示屏(Mac Retina)：devicePixelRatio = 2
主流手机显示屏：devicePixelRatio = 2 or 3
retina显示屏：这是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。 以第三代 MacBook Pro with Retina Display为例， 工作时显卡渲染出的2880x1880个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍。
如何解决1px问题？
方法一：设置视口的initial-scale
document.write('<meta name="viewport" content="width=device-width,initial-scale='+ 1/window.devicePixelRatio +',user-scalable=no">');
通过window.devicePixelRatio获取到dpr，若dpr为2，则1px在retina屏上实际上横跨了2个像素，通过将scale设置为1/2，
方法二：使用transform中的scale属性 //width和height设为原来的2倍
.box{
width: 200px;
height: 200px;
border: 1px solid black;
transform: scale(0.5);
}
一倍图、二倍图、三倍图
对于一张 100px * 100px 的图片，通过 CSS 设置其宽高：
{
width:100px;
height:100px;
}
在普通显示屏的电脑中打开是正常的，但假设在手机或 Retina 屏中打开，按照逻辑分辨率来渲染，他们的 devicePixelRatio = 2，那么就相当于拿 4 个物理像素来描绘 1 个电子像素。这等于拿一个2倍的放大镜去看图片，图片就会变得模糊。
这时，就需要使用 @2x 甚至 @3x 图来避免图片的失真。
适配
1rem=根元素的fontsize(1em=父元素的fontsize)
因此用rem为单位，只需动态改根元素上的fontsize(用js实现或使用vw)就能适配不同的屏幕
px/rem比值,为设计稿宽度/fontsize数值，如设计稿为750px，fontsize为10vw，则比值为75， 即1rem=75px，也就是说从px换算成rem，需要除以75
html{
font-size:10vw
}
@rem:75rem
.box{
width:100/@rem;
height:100/@rem;
background-color:red;
}
flex
作用在父级身上的属性
flex-direction: row | row-reverse | column | column-reverse;
/*用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*用来控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反方向显示。*/
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
/*是flex-direction和flex-wrap的缩写*/
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
/*属性决定了水平方向子项的对齐和分布方式*/
align-items: stretch | flex-start | flex-end | center | baseline;
/*子项们相对于flex容器在垂直方向上的对齐方式*/
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
/*针对多行子项们相对于flex容器在垂直方向上的对齐方式*/
作用在子级身上的属性
order: <integer>;
flex-grow: <number>;/* 数值，默认值是 1 */
/*flex-grow属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。*/
flex-shrink: <number>; /* 数值，默认值是 1 */
/*shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。*/
flex-basis: <length> | auto; /* 默认值是 auto */
/*定义了在分配剩余空间之前元素的默认大小。相当于对浏览器提前告知我要占据这么大的空间，提前帮我预留好。*/
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*flex属性是flex-grow，flex-shrink和flex-basis的缩写。*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;
在Flex布局中，flex子元素的设置float，clear以及vertical-align属性都是没有用的。
grid
基础设置
display:grid;
grid-template-columns:100px 200px 300px/*用于定义每一列的宽度及列数*/
grid-template-columns:repeat(4,1fr);
/*fr是相对单位，相当于弹性盒模型里的一份，在这里吧父级的宽度分成了4份，每个单元格1份*/
grid-template-columns:repeat(auto-fill,100px)
/*autofill关键字：当子级确定宽度时，在父级容器中尽量多的划分格子以放下更多的子级*/
grid-template-rows:100px 200px 300px/*用于定义每一行的高度及行数*/
grid-template-rows:minmax(100px,auto);
/*用minmax函数定义一行的最小高度和最大宽度*/
grid-template:100px 200px/100px 100px;
/*两组数值，用"/"分开，前面是设置行的高度一函数；后面是设置列的宽度及列数*/
grid-gap:10px 10px;
/*两个数值，第一个是行与行之间的间距，第二个是列于列之间的间距；如果只给一个值，那么行与列的间距是一样的*/
grid-row-gap:10px;
grid-column-gap:10px;
grid-auto-columns: auto
/*当子级的数量超过了预定的单元格数量*/
grid-auto-rows: auto
/*https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-rows*/
用区域来操作单元格
父级
grid-template-areas:
'b b g'
'r p p'
'r p p'
/*这个属性给父级，把对应的每个单元格的名字都写好*/
子级
grid-area: r
/*这个属性给子级，子级想要放在那个位置就写上对应的名字*/
单元格设置
4列子元素：
5行子元素
grid-column-start:1;
grid-column-end:3;
grid-row-start:3;
grid-row-end:5;
单元格对齐方式
justify-content:'start'|'center'|'end'|'space-around'|'space-between'|'space-evenly'
/*与flex中的justify-content类似*/
grid-gap和justify-content：
我们可以随意指定单元格之间的间距grid-gap，前提是没有其他属性干扰，比如justify-content;
