• 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);
  • 相关阅读:
    在MS Sql Server中可以能过以下的方法查询出磁盘空间的使用情况及各数据库数据文件及日志文件的大小及使用利用率:
    sqlserver日志的备份与还原
    C#中String 与Color之间的相互转换
    sql 替换字符串
    Components_Box
    射线检测与碰撞通道设置
    切碎方块
    音乐可视化
    枚举
    UI与Actor(蓝图)的互动
  • 原文地址:https://www.cnblogs.com/pheosia/p/10141215.html
Copyright © 2020-2023  润新知