1.rem适配:本质是布局等比例的缩放,通过动态设置html的font-size来改变rem的大小。
动态改写【meta】标签中的缩放比例
给【html】元素添加data-dpr属性,并且动态改写data-dpr的值
给【html】元素添加font-size属性,并且动态改写font-size的值
用插件将将px转成rem。
2.vw 方案: 如果设计稿使用750px宽度,则100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。如果不想自己计算,我们可以使用PostCSS的插件postcss-px-to-viewport,让我们可以直接在代码中写px。
3.搭配rem和vw 给根元素大小设置随着视口变化而变化的vw单位,这样就可以实现动态改变其大小。限制根元素字体大小的最大最小值,配合body加上最大宽度和最小宽度
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。