基于less实现rem布局

1.在index.less中写入代码：

@base-font:100px;
@base-width:640px;//设计稿的宽度
.mixin(@width) {
  font-size: @base-font/@base-width*@width;
}


@media screen and (min-width: 320px) {
  html {
    .mixin(320px)
  }
}
@media screen and (min-width: 375px) {
  html {
    .mixin( 375px)
  }
}
@media screen and (min-width: 414px) {
  html {
    .mixin(414px)
  }
}
@media screen and (min-width: 640px) {
  html {
    .mixin(640px)
  }
}
html{
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
}
使用：比如头部

header{
  background-color: #ffdb47;
  padding: 10rem/@base-font;//10px/base-font,得到的单位是rem
}

基于less实现rem布局

原文：https://www.cnblogs.com/drBlog/p/12587198.html