美文网首页
移动端自动变更html,设置rem

移动端自动变更html,设置rem

作者: Coldhands | 来源:发表于2017-12-04 16:10 被阅读0次
<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>

代码可以直接写在html中,也可以也成 .js 文件,方便调用。

根据这一句 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 可知
iphone4宽度是320px,那么font-size就是20px, 100px就是5rem
iphone6宽度是375px,那么font-size就是23.4375px,100px就是4.267rem

相关文章

  • 移动端自动变更html,设置rem

    代码可以直接写在html中,也可以也成 .js 文件,方便调用。 根据这一句 docEl.style.fontSi...

  • 常用响应式

    rem 通过设置不同屏幕尺寸html的font-size实现响应式PC端 移动端 vw/vh rem弊端:具有阶梯...

  • 说说rem

    rem单位是在移动端布局中最常使用的单位通常做法是设置html{font-size:62.5%},然后使用媒体查询...

  • pc与移动端适配

    建议写两套代码,pc端仍旧用px,而移动端用rem。我们知道,rem是相对html的font-size值换算的,这...

  • 移动端rem+vw适配

    介绍: rem: rem是相对单位,设置根元素 html 的 font-size,比如给 html 设置字体大小为...

  • 5. 移动端适配rem方案

    1. rem+动态html的font-size rem单位是相对于html元素的font-size来设置的,那么如...

  • webpack4进阶知识点(一)

    1.移动端px自动转rem 下载px2rem-loader 页面渲染时计算根元素的font-size使用手机淘宝的...

  • 移动端方面记录(持续更新)

    移动端适配 动态rem方案html的font-size 为 屏幕宽度 / 10记得给body写一个font-siz...

  • 移动端rem 引入js代码

    移动端导入 根部HTML设置 62.5%比如 500px === 500*2/100rem

  • rem移动端自适应

    给HTML设置font-size 使用scss将px转化成rem

网友评论

      本文标题:移动端自动变更html,设置rem

      本文链接:https://www.haomeiwen.com/subject/yyyxixtx.html