最简单的方式实现rem布局

痛定思痛。 2021-11-22 15:28 267阅读 0赞

加上如下js，px转换成rem需要手动，计算方式：量的大小除以100，就等于rem，例如：量的设计稿元素宽度是120，那么就写成\{width: 1.2rem\}，这样写有什么问题，待研究，也欢迎补充

<!DOCTYPE html>
    <html lang="en" style="font-size:100px">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script>
            function resetFontSize() {
                var baseFontSize = 100
                var designWidth = 750
                var width = window.innerWidth
                var currentFontSize = (width / designWidth) * baseFontSize
                document.getElementsByTagName('html')[0].style.fontSize = currentFontSize + 'px'
            }
            window.onresize = function () {
                resetFontSize()
            };
            resetFontSize()
        </script>
        <style>
            *{
         
                padding:0;
                margin:0;
            }
            body{
         
                overflow: auto;
                font-size: .28rem;
            }
            .box{
         
                width:7.5rem;
                height: 1rem;
                background: #000;
            }
        
        </style>
    </head>
    <body>
        <div class="box"></div>
        <p>42341</p>
    
    
    </body>
    </html>

转载于:https://www.cnblogs.com/zph666/p/11009200.html

发表评论取消回复

表情：

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

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

相关阅读

相关移动端rem布局

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

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

相关浅析rem布局方案

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群 ![e0c7847ec7d35cc9dce93ce8a6a66509.png][] 一

逃离我推掉我的手/ 2023年01月14日 02:56/ 0 赞/ 122 阅读

相关 rem的布局原理（Marksheng）

em和rem的认识 > 在布局中，除了px之外，还有两个常见的单位，em和rem em：相对于当前元素的字体大小→ `1em = 当前标签的font-size` r

待我称王封你为后i/ 2023年01月02日 06:26/ 0 赞/ 121 阅读

相关移动端布局 rem

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

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

相关 REM适配方案--布局

页面布局 1. 流式布局适用页面特点：一般使用于–左侧固定+右侧自适应；左右固定宽度+中间自适应通俗来讲容器百分比自适应需求：

àì夳堔傛蜴生んèń/ 2022年04月10日 20:44/ 0 赞/ 426 阅读

相关使用Flexbox布局方式的简单演示

日期：2013-4-4 来源：[GBin1.com][] 众所周知，[CSS][]有多重布局模型的操作，可以使页面按照不同的布局进行展现。Flexble box是另一种布局

矫情吗；*/ 2022年03月12日 09:26/ 0 赞/ 219 阅读

相关 css - 布局 - rem布局

物理像素物理像素是屏幕设备的尺寸单位，在不同的设备中1px里可以容纳的像素颗粒是不相同的，所以1px这个单位其实也是有N个像素颗粒填充的。同一尺寸屏幕的每个像素点所能容

淩亂°似流年/ 2022年01月05日 22:11/ 0 赞/ 423 阅读

相关最简单的方式实现rem布局

加上如下js，px转换成rem需要手动，计算方式：量的大小除以100，就等于rem，例如：量的设计稿元素宽度是120，那么就写成\{width: 1.2rem\}，这样写有什么

痛定思痛。/ 2021年11月22日 15:28/ 0 赞/ 268 阅读

相关 flutter 类似rem布局

引入第三方库 import ‘package:flutter\_screenutil/flutter\_screenutil.dart’; 代码示例: ///

╰半橙微兮°/ 2021年07月24日 17:51/ 0 赞/ 469 阅读

相关 rem布局

原理:通过修改html根元素的大小,使得整体元素大小使得改变 1、创建js文件 (function(){ func

我就是我/ 2021年07月24日 11:05/ 0 赞/ 448 阅读