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

怼烎@ 2021-07-27 01:50 536阅读 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 条评论，536人围观）

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

相关阅读

相关移动端 rem 适配方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关移动端适配rem与em

前言在移动端页面开发过程中避免不了对页面做适配，适配方案说多还是挺多的，接下来主要讨论一下rem和em。兼容性 ios：6.1系统以上都支持 android：2.1

川长思鸟来/ 2022年02月19日 00:05/ 0 赞/ 385 阅读

相关 web移动端rem的适配

\\ 需求: 随着移动端设备的变化，内容也跟着变化。 \\ 先来说说rem单位，以rem为单位，其大小是根据根元素（html标签）的字体大小来判断的，

左手的ㄟ右手/ 2021年11月23日 21:12/ 0 赞/ 431 阅读

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

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

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