CSS技术分享

移动端准备工作：

1，<meta name="viewport"  contert="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

2,单位：px, pt, em, %

em  相对大小（相对于父元素font-size的值）

rem  （默认情况下）1rem=16px      原理：rem的值是根据元素html的font-size发生变化。

3，ppi  dpi   dpr（设备像素比）=物理像素（设备显示）/逻辑像素（css设置的）

移动端一般设计图的大小：640px   750px  1080px

根据设计图的大小确定dpr的值：

如果设计图为640px   dpr为2

如果设计图为750px  dpr为2

如果设计图为1080px  dpr为3

4,视口的百分之百：

font-size=100px  具体像素值

640px / 320px  100vw  1px   100/320  31.25

font-size:31.25vw   1rem  1*31.25vw

750/375px  100vw  1px  100/375  26.67