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. EIGRP-3-EIGRP的多参数度量

    带宽度量参数本身无法区分10Gbit/s及更高速率的接口.对1Gbit/s接口,默认延迟度量参数已设置为最低值1(10微妙).而且EIGRP承载的是经过换算的参数,每台路由器需要将其换算回再计算新开销 ...

  2. js抽奖系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 5、kvm快照相关操作

    kvm虚拟机默认使用raw格式的镜像格式,性能最好,速度最快,不支持支持镜像,zlib磁盘压缩,AES加密等.要使用镜像功能,但是磁盘格式为qcow2就是支持. 关闭虚拟机 virsh shutdow ...

  4. Win10家庭版打不开gpedit.msc

    本文来源 : https://www.ithome.com/html/win10/324926.htm win10家庭版是不自带这个功能的 首先我们打开记事本,并输入以下内容(注意空格): @echo ...

  5. Tree and Queries CodeForces - 375D 树上莫队

    http://codeforces.com/problemset/problem/375/D 树莫队就是把树用dfs序变成线性的数组. (原数组要根据dfs的顺序来变化) 然后和莫队一样的区间询问. ...

  6. Java学习笔记--类和对象

    1.介绍面向对象的编程          面向对象是现在主流的编程样例,它替代了以前C语言使用时的“结构体”,Java是一门面向对象的语言,所以需要熟悉面向对象的概念.面向对象的程序由很多对象组成,每 ...

  7. Java使用Zxing生成、解析二维码工具类

    Zxing是Google提供的关于条码(一维码.二维码)的解析工具,提供了二维码的生成与解析的方法. 1.二维码的生成 (1).将Zxing-core.jar 包加入到classpath下. (2). ...

  8. C#语言使用习惯

    1.使用属性而不是可访问的数据成员 2.用运行时常量(readonly)而不是编译期常量(const) 编译期常量与运行时常量行为的不同之处在于对他们的访问方式不同,编译期常量的值是在目标代码中进行替 ...

  9. 大数据kafka视频教程 学习记录【B站尚硅谷 】

    视频地址: https://www.bilibili.com/video/av35354301/?p=1           2019/03/06 21:59 消息队列的内部实现: Kafka基础: ...

  10. 使用Set去除String中的重复字符

    使用Set去除String中的重复字符 public class test14 { public static void main(String[] args) { String str = &quo ...