Rem是相对于根元素font-size大小的单位

记inphone5屏幕宽度是 320px font-size16px 1rem=16px

  1. <html>
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  5.     <title>smiledemo</title>
  6.     <style>
  7.        .test{
  8.          width: 20rem;
  9.          height: 10rem;
  10.          background-color:bisque;
  11.          text-align: center;
  12.        }
  13.        .hello{
  14.          color: red;
  15.          font-size: 1rem;
  16.        }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div id="app"></div>
  21.     <div class="test">
  22.        <p class="hello" >hello wangyawei</p>
  23.     </div>
  24.   </body>
  25. </html>

于是我们在js中写适配方案3行代码即可搞定

  1. <script>
  2.      let htmlwidth=document.documentElement.clientWidth||document.body.clientWidth;
  3.      console.log(htmlwidth);
  4.      let htmlDom=document.getElementsByTagName("html")[0];
  5.      //以imphone5的屏幕作为适配 320/16=20
  6.      htmlDom.style.fontSize=htmlwidth/20+"px";
  7.   </script>

可以看出完美适配，font-size变为了18.75px

移动端rem匹配的更多相关文章

  1. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  2. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

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

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

  4. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. 移动端REM布局模板(阿里高清方案)

    移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...

  6. 移动端Rem布局注意事项

    1.布局的总体结构框架:      2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...

  7. 移动端rem适应布局

    移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...

  8. 移动端rem适配&iOS兼容

    移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...

  9. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

随机推荐

  1. 黑匣子_NOI导刊2010提高（06） Splay Tree

    题目描述 Black Box是一种原始的数据库.它可以储存一个整数数组,还有一个特别的变量i.最开始的时候Black Box是空的．而i等于0.这个Black Box要处理一串命令. 命令只有两种: ...

  2. POJ3274-Gold Balanced Lineup

    题目链接:点击打开链接 Gold Balanced Lineup Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 16978 ...

  3. Linux表面工作

    https://www.cnblogs.com/welhzh/p/5899875.html 1.显示文本文件的内容 /etc/issue   #登录前提示 /etc/motd   #登录后提示 ssh ...

  4. 【外部节点】json判断@表示正在处理的当前数组项或对象。过滤器还可用于$引用当前对象之外的属性

    $.store.book[?(@.price < $.expensive)] { "category" : "reference", "auth ...

  5. Java start和run启动线程的区别

    我们知道,我们通过调用线程的start方法启动一个线程,那么,我们可以直接调用run方法来启动一个线程吗? 先看下面一段代码: public class Test { public static vo ...

  6. SaltStack自动化安装配置haproxy

    准备环境node1:192.168.217.149 (saltstack master)node2:192.168.217.150(saltstack minion)下载haproxy1.6.2.ta ...

  7. HDU6438：Buy and Resell（贪心+数据结构）

    题意 : 给出一些数.你可以从左到右对这些数进行三种操作花费 Ai 买入东西.以 Ai 价格卖出你当前有的东西.或者什么都不做.现在问你可以获取的最大利益是多少 分析:对每一个元素产生的贡献可以先计算 ...

  8. fastJson Gson对比及java序列化问题

    一个案例 POJO没有set方法, 造成反序列化时出现NPE问题.实际场景:POJO是第三方提供的,final public class XJSONTest { public static void ...

  9. Linux重新挂载磁盘

    Linux下磁盘和目录的概念与WIN不同:比如,分了一个系统分区默认挂载了根(/)目录,根下还有其它目录,比如/user /lib等.如果系统分区不够用,可以再分出分支,把根下其它目录分别挂载出来,例 ...

  10. JS——变量和函数的预解析、匿名函数、函数传参、return

    JS解析过程分为两个阶段:编译阶段.执行阶段.在编译阶段会将函数function的声明和定义都提前,而将变量var的声明提前,并将var定义的变量赋值为undefined. 匿名函数: window. ...