移动webapp适配方案--rem

 

1.rem

rem 就是根据网页根元素「html」来设置字体大小

这有什么用呢？这是移动 webapp 的最佳的适配方案「目前来说」，既然说是最佳的适配方案，那肯定还有别的适配方案，先看看都有那些适配方案吧

• 1、viewport缩放「被废弃了」
• 2、宽度固定两边留白「体验很差」
• 3、响应式布局「工作量太大，针对不同的分辨率各写一套 」

2、如何适配

动态的修改 font-size 使用 rem 就可以适配多种手机

(1)通过 media query 来设置 font-size

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 450px){
    html {
        font-size: 26.75px !important;
    }
}

(2) 通过js设置

不同的手机如Android机型太多，写这么多媒介岂不是累死人了...

rem的计算方法:  

rem = 需要转化的px/rem基准值

rem 基准值「和 html 的 font-size 有关」如何算，这里给出一个比较常见的做法，就是用设计稿的屏幕宽度/10 ,原则上除以多少都可以，除以 10 是为了好除「业界基本上也是这样做的」，比如以 iPhone 6p「414*736」 为例子，那么 rem 的基准值就是 414/10 = 41.4px,然后我们就是要不停的改变这个页面基准值的值即可,我们只要记住一点，rem 的基准值是根据设计稿来决定的

使用sass 来转化 px--rem ，并且使用 js 动态设置 font-size：

a、提供 px2rem() 函数

@function px2rem($px){
  // rem基准值
    $rem : 41.4px;
    @return ($px/$rem) + rem;
}

.box{
  background-color: red;
  width: px2rem(100px);
  height: px2rem(100px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  background-color: yellow;
  width:px2rem(50px);
  height:px2rem(50px);
}

b. 使用 js 动态的修改 font-size 的值

// 取得屏幕宽度
  var devicewidth = document.documentElement.clientWidth || document.body.clientWidth
  //动态设置 html font-size 值
  document.getElementsByTagName('html')[0].style.fontSize = devicewidth / 10 + 'px';

// 窗口大小改变时的回调
window.onresize = function(){
  // 取得屏幕宽度
  var devicewidth = document.documentElement.clientWidth || document.body.clientWidth
  //动态设置 html font-size 值
  document.getElementsByTagName('html')[0].style.fontSize = devicewidth / 10 + 'px';
}