移动端网字体rem设置

水深无声 2022-08-22 05:51 275阅读 0赞

<script type="text/javascript">
            var Dpr = 1, uAgent = window.navigator.userAgent;
            var isIOS = uAgent.match(/iphone/i);
            var isYIXIN = uAgent.match(/yixin/i);
            var is2345 = uAgent.match(/Mb2345/i);
            var ishaosou = uAgent.match(/mso_app/i);
            var isSogou = uAgent.match(/sogoumobilebrowser/ig);
            var isLiebao = uAgent.match(/liebaofast/i);
            var isGnbr = uAgent.match(/GNBR/i);
            function resizeRoot(){
                var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth, wDpr, wFsize;
                var wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight;
                if (window.devicePixelRatio) {
                    wDpr = window.devicePixelRatio;
                } else {
                    wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1;
                }
                if(isIOS) {
                    wWidth = screen.width;
                    wHeight = screen.height;
                }
                // if(window.orientation==90||window.orientation==-90){
                //     wWidth = wHeight;
                // }else if((window.orientation==180||window.orientation==0)){
                // }
                if(wWidth > wHeight){
                    wWidth = wHeight;
                }
                wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;
                wFsize = wFsize > 32 ? wFsize : 32;
                window.screenWidth_ = wWidth;
                if(isYIXIN || is2345 || ishaosou || isSogou || isLiebao || isGnbr){//YIXIN 和 2345 这里有个刚调用系统浏览器时候的bug，需要一点延迟来获取
                    setTimeout(function(){
                        wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth;
                        wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight;
                        wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;
                        wFsize = wFsize > 32 ? wFsize : 32;
                        // document.getElementsByTagName('html')[0].dataset.dpr = wDpr;
                        document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';
                        document.getElementById("fixed").style.display="none";
                    },500);
                }else{
                    // document.getElementsByTagName('html')[0].dataset.dpr = wDpr;
                    document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';
                    document.getElementById("fixed").style.display="none";
                }
                // alert("fz="+wFsize+";dpr="+window.devicePixelRatio+";UA="+uAgent+";width="+wWidth+";sw="+screen.width+";wiw="+window.innerWidth+";wsw="+window.screen.width+window.screen.availWidth);
            }
            resizeRoot();
        </script>

body {
        font-size: 32px;
        font-size: .32rem;
        max-width: 1080px;
        margin: 0 auto;
        background: #f6f6f6;
        font-family: 'STHeiti','Microsoft YaHei',Helvetica,Arial,sans-serif;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

.m_article .m_article_info .m_article_title {
        font-size: .34rem;
        margin-bottom: .2rem;
        color: #404040;
        line-height: .42rem;
        width: 100%;
        display: inline-block;
    }

通用：

html {
        font-size: 62.5%;
    }

body {
        font-family: Arial,Roboto,"Droid Sans",Helvetica,"Helvetica Neue","Microsoft Yahei",sans-serif;
        color: #333333;
        font-size: 1.5rem;
        line-height: 1;
    }

function AutoWidth(){
    			var winWidth,winHeight;
    			if (window.innerWidth){
    				winWidth = window.innerWidth;
    			}else if ((document.body) && (document.body.clientWidth)){
    				winWidth = document.body.clientWidth;
    			}
    			if (window.innerHeight){
    				winHeight = window.innerHeight;
    			}else if ((document.body) && (document.body.clientHeight)){
    				winHeight = document.body.clientHeight;
    			}		
    			
    			// 通过深入 Document 内部对 body 进行检测，获取窗口大小
    			if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
    				winHeight = document.documentElement.clientHeight;
    				winWidth = document.documentElement.clientWidth;
    			}
    			
    			var s = 100;
    			if(winHeight > winWidth){
    				s = 100 / 750 * winWidth;
    				s = s >200 ? 200 : s;
    			}
    		   $('html').css('font-size',s);
    		}

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端 rem用法

*rem是如何实现布局的？** rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 ...

客官°小女子只卖身不卖艺/ 2024年04月18日 07:57/ 0 赞/ 69 阅读

相关 CSS3 移动端rem

[rem的值并不是固定的][rem] [rem是相对根节点html发生变化的（和父节点无关） ][rem] [实际开发中一般默认的把html根节点设置为10px（

╰+哭是因爲堅強的太久メ/ 2023年10月18日 16:36/ 0 赞/ 74 阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 181 阅读

相关移动端rem布局

rem布局（等比缩放布局） rem布局好处：不同设备下看起来比较协调。坏处：显示的内容并不会在大屏幕展示的内容多。 em : 是一个相对单位，1

分手后的思念是犯贱/ 2023年07月09日 13:29/ 0 赞/ 179 阅读

相关移动端字体设置rem，怎么设置

我们的手机屏幕宽度有时候不一致，字体设置一致就会展示样式有出入，对字体有兼容有两种方式一：少部分手机适配px html\{font-size:10px\} @me

向右看齐/ 2023年01月02日 03:25/ 0 赞/ 256 阅读

相关移动端布局 rem

移动端布局 rem rem定义 1、rem相对于 html元素字体大小来说的 2、rem的有点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以

曾经终败给现在/ 2022年11月19日 09:47/ 0 赞/ 288 阅读

相关移动端网字体rem设置

<script type="text/javascript"> var Dpr = 1, uAgent = window.navigator.u

水深无声/ 2022年08月22日 05:51/ 0 赞/ 276 阅读

相关移动端rem怎么用?

简单说明下，一般字体有4种，px,pt,em,rem,这里简单介绍两个px和rem。 ![Center][] ![Center 1][] 感觉菜鸟教

男娘i/ 2022年06月04日 08:17/ 0 赞/ 273 阅读

相关移动端rem加载时页面字体先放大再缩小

先给body 设置visibility：hidden； <body id="body" style="visibility: hidden;"> </body

比眉伴天荒/ 2021年10月19日 02:24/ 0 赞/ 352 阅读

相关 rem移动端课程表案例

<html> <head> <meta charset="utf-8"> <meta name='viewport' content='wi

野性酷女/ 2021年07月24日 15:20/ 0 赞/ 477 阅读