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

向右看齐 2022-03-15 06:58 328阅读 0赞

--------------------

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

*  rem
 *  js
 *  css3
 *  media query

--------------------

摘要：css3和js是实现rem适配

### 第一：css3的media query来实现适配，例如下面这样： ###

html {
    font-size : 20px;
    }
    @media only screen and (min-width: 401px){
    html {
    font-size: 25px !important;
    }
    }
    @media only screen and (min-width: 428px){
    html {
    font-size: 26.75px !important;
    }
    }
    @media only screen and (min-width: 481px){
    html {
    font-size: 30px !important;
    }
    }
    @media only screen and (min-width: 569px){
    html {
    font-size: 35px !important;
    }
    }
    @media only screen and (min-width: 641px){
    html {
    font-size: 40px !important;
    }
    }

### 第二通过js动态设置html字体，例如下面这样 ###

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
               // 默认设计图为640的情况下1rem=100px；根据自己需求修改
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };
    
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

以上两种方式均能实现rem适配

发表评论取消回复

表情：

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

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

相关阅读

相关移动端 rem 适配方案

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

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

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

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

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

相关 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 赞/ 312 阅读

相关 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 赞/ 536 阅读