加上如下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>

最简单的方式实现rem布局的更多相关文章

  1. （淘宝无限适配）手机端rem布局详解（转载非原创）

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  2. 关于移动端 rem 布局的一些总结

    [资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...

  3. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  4. （淘宝无限适配）手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  5. rem布局原理深度理解（以及em/vw/vh）

    一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...

  6. 细说移动端 经典的REM布局 与 新秀VW布局

    和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局 实现单边边框1px 实现多边边框1px 实现边框圆角 实现容器固定 ...

  7. 第132天：移动web端-rem布局（进阶）

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  8. 第130天：移动端-rem布局

    一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...

  9. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

随机推荐

  1. [GIT]提交后版本恢复

    如果在回退以后又想再次回到之前的版本,可以用relog查看commit id,再使用reset设置.   1.执行 relog 后:   展示的最前面的部分就是commit id,后面会用来作为恢复的 ...

  2. java使用解压zip文件，文件名乱码解决方案

    File outFileDir = new File(outDir);if (!outFileDir.exists()) { boolean isMakDir = outFileDir.mkdirs( ...

  3. Fiddler抓包原理和使用详解

    iddler抓包工具在APP开发过程中使用非常频繁,对开发者理解HTTP网络传输原理以及分析定位网络方面的问题非常有帮助.今天抽点时间出来总结一下Fiddler在实际开发过程中的应用. 我开发过程中使 ...

  4. LC 163. Missing Ranges 【lock, hard】

    Given a sorted integer array nums, where the range of elements are in the inclusive range [lower, up ...

  5. py matplotlib 多个figure同时画多个图以及多个图例多个折线图

    图例负号乱码的问题 import numpy as np  import matplotlib.pyplot as pltimport  matplotlibplt.rcParams['axes.un ...

  6. 百度AI接口---身份证识别Demo

    题记:自己是做java web的,但是本人以前接触并学习很多图像的知识,所以对图像很敏感.下面以百度的一个接口,实现身份证识别案例 1.需要百度开发者AppID.SecretKey .API Key. ...

  7. IDEA 常用插件及快捷键总结

    现在开发中和日常自己开发都统一换成了 IDEA 进行开发了.现在针对自己常用到的插件和快捷键进行总结记录下. 插件 Alibaba Java Coding Guidelines:阿里巴巴编码规约 Gr ...

  8. iOS杂记-告警清理

    NS_ASSUME_NONNULL_BEGIN @interface Robot : NSObject @property (copy,readonly) NSString *name; - (nul ...

  9. 2019.12.04 ADT on eclipse 配置篇

    今天看JerryWang的简书博客https://www.jianshu.com/p/74ad8e4bbc49 ,SAP GUI 和ADT是互为补充的关系,有很多SAP新出的技术都没有办法在GUI上开 ...

  10. 【.NET】关于.NET前后台提示框的那点事

    前言 关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容 客户:需求方: 小白:实现方(全权负责 ...