js自适应rem -- 主要适用于移动端

最新推荐文章于 2023-04-12 13:24:12 发布
最新推荐文章于 2023-04-12 13:24:12 发布
阅读量206 收藏
点赞数
分类专栏： 前端资源 移动端 文章标签： rem.js 移动端适配

rem是指相对于根元素(html)的字体大小的单位, 利用它能实现强大的屏幕适配布局。下面主要应用的是基于js去调整根元素字体大小， 从而实现各个尺寸屏幕的适配；

//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {
    var doc = document,
    win = window,
    docEl = doc.documentElement,
    remStyle = document.createElement("style"),
    tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
    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);

使用方法：

1.复制上面这段代码到你的页面的头部的script标签的最前面。

2.根据设计稿大小，调整里面的最后两个参数值。

3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px300px,换算成rem则为1rem3rem。

注： html font-size字体大小 = 设备宽度 / (设计图尺寸 / 100);
假设提供的设计稿为750PX的，那么：
deviceWidth = 320，font-size = 320 / 7.5 = 42.6666px
deviceWidth = 375，font-size = 375 / 7.5= 50px
deviceWidth = 414，font-size = 414 / 7.5 = 55.2px
deviceWidth = 500，font-size = 500 / 7.5 = 66.6666px

实际应用：假设有一个750的设计稿分上中下三个部分， 上（650＊80）， 中（左边：200＊130， 右边：420 ＊ 130）， 下（650 ＊ 200）

则实现代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="keywords" content="" />
    <title>rem demo</title>
    <link rel="stylesheet" href="base.css">
    <script type="text/javascript">
        ;
        (function(designWidth, maxWidth) {
            var doc = document,
                win = window,
                docEl = doc.documentElement,
                remStyle = document.createElement("style"),
                tid;

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                maxWidth = maxWidth || 540;
                width > maxWidth && (width = maxWidth);
                var rem = width * 100 / designWidth;
                remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
            }

            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(remStyle);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(remStyle);
                doc.write(wrap.innerHTML);
                wrap = null;
            }
            //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
            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);
    </script>
    <style media="screen">
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .header {
            width: 6.5rem;
            height: 0.8rem;
            background: red;
            margin: 0 auto 0.2rem;
        }

        .body {
            width: 6.5rem;
            height: 3rem;
            background: blue;
            overflow: hidden;
            margin: 0 auto;
            margin-bottom: 0.2rem;
        }

        .body_left {
            width: 2rem;
            height: 3rem;
            background: #eb4509;
            float: left;
        }

        .body_right {
            width: 4.2rem;
            height: 3rem;
            background: green;
            margin-left: 0.3rem;
            float: left;
        }

        .footer {
            width: 6.5rem;
            height: 2rem;
            background: purple;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!-- 正文 -->
    <div class="container">
        <div class="header">

        </div>
        <div class="body">
            <div class="body_left">

            </div>
            <div class="body_right">

            </div>
        </div>
        <div class="footer">

        </div>
    </div>
</body>

</html>

效果如下图所示：
在这里插入图片描述
这样不论我们屏幕的尺寸怎么变化， 我们画好的页面总是能按照定好的比例调整；

转自：https://blog.csdn.net/u013558749/article/details/78835980

行动中的victor
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rem.js 移动端 H5 解决各种机型适配问题的js
04-20
rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位（注意这里泛指是相对于html中的根元素标签也就是html）。 一般用于在移动端H5页面中解决各种机型适配问题的js，文件中详细说明。
谈一谈rem的应用场景及其如何使用
u010227042的博客
06-09 2003
rem rem是什么 相信大多数同学都写过移动端，那么对rem就很熟悉了，它是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们 前端常说的适配单位rem。 认识rem 当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM（文档对象模型，Document Object Model）。树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body..
js实现移动端字体自适应（rem）
蜗牛的博客
04-19 2208
主要针对移动端做字体相应，相对于媒体查询要方便点，这里简单记录一下方便以后使用。 <script> function resizeFont() { //获取屏幕宽度 let clientWidth = document.documentElement.clientWidth || document.body.clientWidth; ...
rem实现移动端自适应
weixin_44161385的博客
04-12 570
rem实现自适应
rem自适应布局-移动端自适应必备:flexible.js
Candy_mi的博客
06-04 277
原文链接：http://caibaojian.com/flexible-js.html由于移动端特殊性，本文讲的是如何使用rem实现自适应，或叫rem响应式布局，通过使用一个脚本就可以rem自适应，不用再为各种设备宽度不同而烦恼如何实现自适应的问题。rem是相对于根元素&lt;html&gt;，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器ht...
移动端自适应布局 rem布局（简单直接）
半兽先生的博客
07-25 1843
移动端自适应布局 rem布局（简单直接）
手把手教你vue-cli3搭建项目实现移动端自适应----- flexible和 postcss-px2rem
面对疾风吧
08-17 8643
1、安装 flexible和 postcss-px2rem 按照我说的一步一步去做，保证可以完成哦！有图有代码，简单明了可复制！ 如果能帮助到你，还望能给个赞+关注，鼓励一下！谢谢！ npm i lib-flexible postcss-px2rem --save flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-sc.........
移动端自适应布局-rem.js
09-19
使用rem单位实现自适应布局，轻松掌握移动端开发。用法简单，比如普遍的设计图宽度为750px，那么在css中设置为7.5rem即可实现宽度100%
基于vue-cli配置lib-flexible + rem实现移动端自适应
11-30
使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader --save-dev 配置px2rem-loader 在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置 关于...
移动端rem开发自适应js写法
08-10
移动端rem开发自适应js写法
rem移动端h5自适应工具pixelRem.js
09-07
超简单使用方法：import导入默认tool对象；tool.remDefault模式下750设计稿手机全屏CSS设置为750/1000=0.75rem；tool.remHalf模式下为750/100/2=3.75rem；
rem.js 移动端自适应
06-29
rem.js 移动端自适应
移动端自适应rem
siyangyuyangzhu的博客
09-19 545
今天写的是移动端自适应rem 【内容】 先给大家普及一下重要的知识点！！ （1）浏览器的默认字体大小：16px （2）chrome字体最小限制：12px （3）CSS单位分为绝对单位和相对单位 大部分浏览器的字体最小限制为12px！ css单位 定位中有绝对定位，相对定位，当然css中也是有绝对单位和相对单位的 CSS中，单位分为两类 （1）绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是...
PC端自适应使用rem
热门推荐
weixin_44999830的博客
05-06 1万+
做一个PC端的网页，设计图是1920X1080，要在常见屏上显示正常 ，比如：1280X720 1366X768 1440X900 1920X1080。 就要使用REM，width、height、margin、padding、left、top都采用了REM, 一、如何使用 1、PC端 当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:...
grpcio-1.3.0-cp35-cp35m-win_amd64.whl
最新发布
06-13
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
ASP.NET多语种网络硬盘系统的设计(源码)
06-13
网络硬盘系统是计算机网络中比较流行的一种应用软件，但是一般的网络硬盘系统只适用于使用单一语种的人群。为满足不同语种人群对网络硬盘系统的需求，设计了多语种网络硬盘系统。采用ASP.NET 2.0开发语言，利用ASP.NET中的三层结构、B/S模式结构以及ASP.NET网页资源的设计思路，实现了包括文件夹的操作、文件的操作、网页的多语种化三个功能模块；通过文件夹功能模块，可以添加、删除、更改名字、移动、浏览文件夹；通过文件功能模块，可以查看文件属性、上传、下载、更改名字、移动文件；通过系统的多语种化模块，能够自动识别客户端的默认语言并反馈给客户端相应语言的网页。通过应用多语种网络硬盘系统，可以满足不同语种人群共享一个网络硬盘系统的需求，具有一定的应用价值。
移动端自适应布局 rem
09-01
移动端自适应布局 rem 是一种相对单位，它是相对于根元素(html标签)的字体大小来计算长度的。通过给根元素设置一个基准字体大小（一般是10px），然后使用rem作为其他元素的长度单位，可以使页面中的元素按照比例...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值