需求:在项目的一部分页面内引入响应布局,所以弃用了全局配置px自动转rem
1、设置html根元素为37.5px
this.$nextTick(function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
})
2-1、sass
定义:
@function px2rem($px, $base-font-size: 75px) {
@return ($px / $base-font-size) * 1rem;
}
使用:
width: px2rem(600px); // 设计稿的300px。
2-2、lesss
定义:
//定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
使用:
.wrap{
.px2rem(width,600); // 设计稿的300px。
}
网友评论