移动端rem适配

750px宽度的设计稿,1rem为100px

(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 = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 随着移动端的发展,rem的用途越来越广泛,很好的解决了px无法适配移动端的问题。因为rem是以根节点来计算的,在根...
    像风一样自由2017阅读 1,016评论 0 1
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,046评论 0 2
  • 移动端适配都用的时rem来做,在你的项目中只需要引用下面的js,即可适配成功。代码时已iphone6来做的,fon...
    leesession阅读 1,748评论 0 0
  • 移动端适配方法比较多,最钟爱的还是REM适配,通过js改变font-size的数值。 注:对于部分机型(如Nexu...
    炸鱼Rovy阅读 891评论 0 2
  • <<<初雪目录在此,请戳这里!<<<蔷薇小说文集在此,请戳!<<<古风小说《青梅花时开》目录 上一章回顾 文丨蔷薇...
    蔷薇下的阳光阅读 571评论 7 5