zoukankan      html  css  js  c++  java
  • Android、Ios手机端字体根据屏幕分辨率自适应的方法,使用rem和px的区别

    使用rem计算字体时,添加下列js文件,并根据750宽度的设计稿计算字体换算,用下述方法,代表750宽度下,1rem=50px; 根据这个倍率进行设置字体大小。

    例如:设计稿750宽度,设计稿字体为30px,那么在开发的时候,字体设置为30/50*1=0.6rem。

    ;(function(designWidth, maxWidth) {
        var doc = document,
            win = window;
        var docEl = doc.documentElement;
        var tid;
        var rootItem,rootStyle;
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;   //浏览器宽度
            if (!maxWidth) {
                maxWidth = 640;
            };
            if (width > maxWidth) {
                width = maxWidth;
            }
            //与淘宝做法不同,直接采用简单的rem换算方法1rem=100px
            var rem = width * 100 / designWidth;
            //兼容UC开始
            rootStyle="html{font-size:"+rem+'px !important}';
            rootItem = document.getElementById('rootsize') || document.createElement("style");
            if(!document.getElementById('rootsize')){
                document.getElementsByTagName("head")[0].appendChild(rootItem);
                rootItem.id='rootsize';
            }
            if(rootItem.styleSheet){
                rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
            }else{
                try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
            }
            //兼容UC结束
            docEl.style.fontSize = rem + "px";
        };
        refreshRem();
    
        win.addEventListener("resize", function() {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
    
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 750);
  • 相关阅读:
    Html5 冒泡排序演示
    Html5 Json应用
    Html5 和 CSS的简单应用
    Html5 布局方式
    Html5 绘制五星红旗
    Html5 绘制旋转的太极图
    Html5绘制时钟
    Html5 实现灯笼绘制
    "电量信息"组件:<battery> —— 快应用组件库H-UI
    "系统音量"组件:<volume> —— 快应用组件库H-UI
  • 原文地址:https://www.cnblogs.com/pheosia/p/10141215.html
Copyright © 2011-2022 走看看