rem.js 移动端rem适配js代码

怼烎@ 2021-07-27 01:50 649阅读 0赞

## js ##

!(function(win, doc) {
        function setFontSize() {
            // 获取window 宽度
            var winWidth = window.innerWidth;
                //这里是假设在750px宽度设计稿的情况下
                //可以根据实际需要修改
            doc.documentElement.style.fontSize = (winWidth / 750) * 100 + 'px';
        }
        // onorientationchange 屏幕旋转事件
        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
        var timer = null;
        win.addEventListener(evt, function() {
            clearTimeout(timer);
    
            timer = setTimeout(setFontSize, 300);
        }, false);
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                clearTimeout(timer);
    
                timer = setTimeout(setFontSize, 300);
            }
        }, false);
        //初始化
        setFontSize();
    }(window, document));

## meta ##

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no, minimal-ui, shrink-to-fit=no, viewport-fit=cover">

发表评论取消回复

表情：

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

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

相关阅读

相关移动端 rem 适配方案

前端面试移动端rem适配方案 1.适配方案移动端的适配方案： 1.flex + rem单位做适配效果（比如淘宝和小米移动端）当前市场最多 2.flex

柔光的暖阳◎/ 2024年03月01日 04:18/ 0 赞/ 128 阅读

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

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

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

相关 js动态计算移动端rem适配问题

(function (doc, win) { var docEl = doc.documentElement, resizeEv

超、凢脫俗/ 2023年06月06日 10:55/ 0 赞/ 80 阅读

相关 Html5移动端网页端适配(js+rem)

业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js

￡神魔★判官ぃ/ 2022年10月27日 05:25/ 0 赞/ 340 阅读

相关 Html5移动端网页端适配(js+rem)

业务场景：由于需求是适配两端屏幕，所以刚开始想的css用rem写，但是还是会出现字体和布局不会等比缩放的情况，后来找到一种js代码针对根元素去做的缩放配置，加上rem和这个js

傷城~/ 2022年10月27日 05:25/ 0 赞/ 358 阅读

相关 js 移动端适配（动态rem）

(function (doc, win) { var docEl = doc.documentElement,

小鱼儿/ 2022年06月08日 22:23/ 0 赞/ 367 阅读

相关【移动端适配方案二弹性布局】Flex弹性布局+rem实现移动端适配（JS+rem+viewport）

前端开发工程师根据UI设计师给的设计稿进行开发。为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算，才能写进CSS 实现如下： 1、设置width=devi

电玩女神/ 2022年05月21日 00:08/ 0 赞/ 505 阅读

相关移动端 rem.js动态控制适配

直接上代码： (function remYS(doc, win) { var docEl = doc.documentElement

谁借莪１个温暖的怀抱￠/ 2022年05月08日 08:14/ 0 赞/ 389 阅读

相关 js动态计算移动端rem适配问题

-------------------- title: js动态计算移动端rem适配问题 date: 2017-04-20 14:33:37 tags: re

向右看齐/ 2022年03月15日 06:58/ 0 赞/ 427 阅读

相关 rem.js 移动端rem适配js代码

js !(function(win, doc) { function setFontSize() { // 获取windo

怼烎@/ 2021年07月27日 01:50/ 0 赞/ 650 阅读