PC端使用rem进行屏幕适配

之前做PC端网页一直不知道如何去做屏幕适配，特意去搜，看到一篇文章后豁然开朗，先奉上链接。
PC端适配屏幕尺寸 - 瓦力博客
详细的可以去看文章，我在这里只做一下简单总结。

How to do

假定设计稿宽度为 1600px，某个box设计稿宽度为400px。

html {
    font-size: 16px; // 设计稿宽度/100 => 1rem = 16px
}
#box {
    width: 25rem; // 400px/16px
}

@media only screen and (max-width: 1366px) {
   html{
      font-size:13.66px; // 1rem = 13.66px
   }
}

工具

• Sass

@function px2rem($px, $base-font-size) {
  @if (unitless($px)) { //unitless函数判断有无单位，无单位返回true
    @return ($px / $base-font-size) * 1rem;
  } @else if (unit($px) == em) {//函数取出传入参数的单位 px/em/rem..
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

#box {
    width: px2rem(400, 16);
}
//编译为
#box {
    width: 25rem;
}

• px2rem在线工具

转载于:https://www.cnblogs.com/qimeng/p/10461098.html