【移动端布局】最简洁方案VW布局font-size=26.6667vw

与鱼有约

已于 2023-01-06 08:54:08 修改

阅读量477

点赞数 2

文章标签： html 前端 css

于 2023-01-06 08:51:12 首次发布

本文链接：https://blog.csdn.net/weixin_62273193/article/details/128573010

版权

原理说明

节省了常规通过计算视窗变化，重新计算HTML上font-size设置值的过程，一劳永逸
直接设置 html { font-size:26.6667vw; }
26.6667的由来，iPhone6\7\8 宽度为375px 一屏幕宽为100vw，如果求1px等于多少vw,便可以计算得知 1px100vw/375px = 0.266667vw ;
那么如果设置字体大小为100px = 1000.266667vw = 26.6667vw,而在iPhone6plus/7plus/8plus/时候，宽度为414px 乘以0.26667vw 可得110px，这与iphone6/7/8的100px 是等比变化的如：375/414 = 100/110 ；这样就做到了vw一劳永逸的目的
将PSD调整为375进行PX布局，通过VsCode插件 px2rem配置基础font-size为100 圈选px样式部分，通过快捷键crtil+Z一次性调整为rem单位,注意为body设置基础px值，防止页面渲染问题,body上的font-size主要是针对字体的，html上的font-size主要是针对布局的
补充：如果页面的字体也需要一起适配的话就不要设置body的font-size，然后页面字体也设置为rem的单位

html { font-size:26.666667vw;}
body {font-size:16px;} 

/*布局代码区域*/
设计图以iphone6/7/8 375尺寸为准，直接量取px即可，
后续通过VScode工具(px to rem)设置好参数 Number of pixels per 1rem项目为100
然后圈选CSS样式alt+z即可完成转化工作