vw、rem屏幕适配

173 阅读1分钟

vw、rem屏幕适配

一、适配750px的屏幕vw

①公式:适配屏幕宽度(vw0=100vw*设计稿div宽度/设计稿宽度)

②calc计算写法:(width:calc(100vw*计稿div宽度/设计稿宽度))

1647886221588.png ③安装vscode插件便于计算适配的可视宽度,及相关设置

插件名称:px2vw

1647886397856.png

推理vw做屏幕适配.png

二、适配屏幕rem:

①rem单位 是相对长度单位(找到参照物)参照的 根标签(html)的fontsize

②谷歌浏览器默认字体大小为16px,最小为12px

③如果 设置了 html的字体大小 设置为 1px

​ 1 rem = 1px ?

​ 但是对于字体来说 最小还是 12px(谷歌) 火狐(最小文字1px)

④使用js(由淘宝团队开发)改变屏幕宽度改变fontsize,注意需将js标签写道html内

1647886780899.png ⑤小结

​ 1 rem 大小是相对于页面根标签的字体大小

​ 2 不要去研究 rem小于 12的时候的情况(自己设置尽可能将html的字体设置为大于等于12 避免问题即可)

rem屏幕适配.png

rem屏幕适配2.png