vue lib-flexible font-size失效 及 移动端适配原理
新建项目想使用lib-flexible插件完成屏幕自适应后,设置remUnit:192(设计稿为1920px)后,发现不管在什么尺寸下的屏幕下font-size都为54px,rem也就失去意义了,搜索引擎查了一圈也没看到什么解决方案,只好老老实实看源码了,结果发现对屏幕大小做了限制,大于540px的屏幕一律按540处理了,注释掉这段即完美解决~...
新建项目想使用lib-flexible插件完成屏幕自适应后,设置remUnit:192(设计稿为1920px)后,发现不管在什么尺寸下的屏幕下font-size都为54px,rem也就失去意义了,搜索引擎查了一圈也没看到什么解决方案,只好老老实实看源码了,结果发现对屏幕大小做了限制,大于540px的屏幕一律按540处理了,注释掉这段即完美解决~
刚面试了几次,发现这个设备适配被问到的概率很大,大概10次里问了7,8次这样,于是自己结合网上的解释自己捋了捋原理
首先rem这个单位是以根节点(html标签)字体大小作为参考的,根节点的font-size默认16px (一般默认14px,有的16px,这里我喜欢16所以取16px hhhhh~)此时1rem=16px。为了测试,我们修改根节点字体大小为20px,document.getElementByTagName('html')[0].fontSize=20,此时1rem就变成了20px。UI提供给我的设计稿是750px的,所以在开发时我修改配置的根节点字体基准为75px。这时候我们设置的比例系数就是 htmlwidth(屏幕宽度)/fontSize(根节点字体大小)=10 。然后按照设计稿上的尺寸编写代码,这时用的单位px,编译时会使用px2rem插件将px转化为rem。例如我们设置div{width:150px} 这时编译后的文件里为 div{width:2rem}。在设备适配的过程中插件会获取屏幕宽度,并且按照比例把根节点字体大小调整成相同比例 ,例如iphone6的屏幕宽度htmlwidth=320px,此时根据先前设置的比例系数 10 插件会将根节点字体大小设置成 320/10 = 32px ,相对应的div的宽度就变为64px,即32px(根节点大小)*2rem(插件转化的rem值)=64px。使得同一个div在不同的尺寸下都有对设计稿的良好还原。
总结一下 移动端适配的原理 就是 先按照设计稿开发,并设置比例系数,从而生成固定的rem单位样式。监听设备屏幕宽度,按照比例系数(系数值随意设置)设置相应的根节点字体大小,从而在不同设备上实现样式自适配
更多推荐
所有评论(0)