移动端rem用法总结

时间 2019-11-13

标签移动 rem 用法总结栏目无线繁體版

原文原文链接

先介绍一下这个近年来突起的黑马html

CSS3中新增的属性，从IE9开始兼容，手机端都兼容。
参考的是<html>这个标签的font-size。rem中的r就是root根的意思。
因此rem要比em好用的多，由于em参考的是父亲的字号，和rem永远参考的是根元素（html标签）的字号。

rem被发明，其实是为了作字号的变化方便一点。

中国的前端工程师，发现，rem不单单能够用来设置字号。还能够用来设置任何须要长度的地方。好比：
width、height、line-hight、background-size、border-width。

用这个黑马是能够作不一样分辨率的响应式布局的固然移动端就不要考虑pc了兼容到ipad就能够了

思路就是全部的单位都用rem来写无论是div的宽高仍是a标签的字体大小

假设咱们的移动端psd是按照640的标准来的那么就设置 html{font-size:20px}

再去把div的宽度和高度由像素所有转变为rem 还有字体大小也转换一下

这只是兼容了一个手机型号或者说640的viewport的布局那么更小的或者更大的怎么办呢不要着急有两种办法来解决看你习惯了

第一种 media出场

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

第二种办法来了前端

<script>
     (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
</script>

好了你们赶忙去试试吧若是有什么问题欢迎留言新手总结欢迎拍板前端工程师