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. 迎接仪式 dp

    题目描述 LHX教主要来X市指导OI学习工作了.为了迎接教主,在一条道路旁,一群Orz教主er穿着文化衫站在道路两旁迎接教主,每件文化衫上都印着大字.一旁的Orzer依次摆出“欢迎欢迎欢迎欢迎……”的 ...

  2. python3+Appium自动化08-数据配置yaml

    yaml简介 yaml是一种简洁的非标记语言.yaml以数据为中心,使用空白,缩进,分行组织数据,从而使得表示更加简洁易读 由于实现简单,解析成本低,yaml特别适合在脚本语言中使用.现有的语言实现: ...

  3. java编程如何实现2017-01-16 22:28:26.0这样的时间数据，转换成2017:01:16:22:28:26这样的时间数据

    不多说,直接上干货! timereplace.java package zhouls.bigdata.DataFeatureSelection.util; /* * 这个程序,是用来做补充的 */ p ...

  4. FIRST集和FOLLOW集，FIRSTVT集和LASTVT集的求法

    学习编译原理时, 这几个集合相信大家并不陌生:FIRST.FOLLOW.FIRSTVT.LASTVT. 其中First和Follow是一对,而Firstvt和Lastvt是一对. 它们的作用分别是: ...

  5. jdbc操作数据库的步骤

    package com.jckb; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepare ...

  6. Eclipse下git如何创建分支

    1.项目–Team–Switch To –New Branch 2.Branch name 填写自己的版本号,然后Finish即可 3.将分支内容Push到远程服务器上

  7. CentOS 6.2安装nagios

    nagios分为监控机和被监控机两类机器      监控主机:gserver150(192.168.111.150) 被监控主机:gserver151(192.168.111.151)   一.  监 ...

  8. Java并发编程的艺术，解读并发编程的优缺点

    并发编程的优缺点 使用并发的原因 多核的CPU的背景下,催生了并发编程的趋势,通过并发编程的形式可以将多核CPU的计算能力发挥到极致,性能得到提升. 在特殊的业务场景下先天的就适合于并发编程. 比如在 ...

  9. CentOS 6.0 系统 LAMP(Apache+MySQL+PHP)安装步骤

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  10. 给 Magento 2 添加缓存层的分析与尝试

    虽然黑色星期五有惊无险的过去了, 但是 Magento 2 社区版无法读写分离这个限制, 始终是悬在整个网站上的一把利剑. 我之前尝试过给 Magento 2 写一个 MySQL 读写分离的插件, 在 ...