px-rem-vw
设备像素比 = 物理像素 / 逻辑像素
2 = ps中侧量的 / css上写的
写移动端的需求:
希望页面内容能够跟随浏览器窗口的大小变化而变化
测量出来的是 px单位
需要写的是 rem单位,跟根元素的font-size值成倍数关系
需要跟随浏览器窗口变化的是 vw单位
设计稿 = 750px dpr=2 设备宽度: 375px
100vw = 满屏 = 375px
1vw = 3.75px
假设: html{font-size:120px
1rem = 120px
1rem = 120px / 3.75px = 32vw
结论:
html{font-size:32vw
工具设置: 120 测量出来的值转rem前都需要减半再转
工具设置: 240 测量出来的值,直接转rem
设计稿 = 640px dpr = 2 设备宽度: 320px
100vw = 满屏 = 320px
1vw = 3.2px
假设 html{font-size:120px
1rem = 120px
1rem = 120px / 3.2px = 37.5vw
结论:
html{font-size:32vw
工具设置: 120 测量出来的值转rem前都需要减半再转
工具设置: 240 测量出来的值,直接转rem
设计稿 = 1080px dpr = 3 设备宽度: 360px
100vW = 360px
1vw = 3.6px
假设: html{font-size:80px
1rem = 80px
1rem = 80px / 3.6px = 22.22vw
结论:
html{font-size:22.22vw
工具设置: 80 测量出来的值转rem前都需要减半再转
工具设置: 240 测量出来的值,直接转rem