移动端准备工作:
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