1.什么是REM

先来认识几个常见单位：

  • px：像素，这个大家都知道。
  • vh：viewport height，视窗高度，是指占整个浏览视窗高度的百分数。
  • vw：viewport width，视窗宽度，是指占整个浏览视窗宽度的百分数。
  • em：一个大写字母M的宽度（有时候也说一个汉字的宽度，但其实是错的），多少em是指大写字母M的宽度的倍数

而rem（Root em） ，理解过来是指根元素（<html>标签）中的font-size，虽然rem中有em但是这里两个单位没有任何关系，这里需要特别注意。

举个例子，chrome默认字体大小为16px，如果不设置html{font-size:XXpx},所以在这时1rem就是16px，

2.REM和EM的区别

首先两者什么关系都没有！

em是指自身的font-size的倍数，这里举个例子

html {

	font-size:16px;

｝

p {

	font-size:12px;

	height:2em;	/*2 x 12 = 24px*/

	width:2rem; /*2 x 16 = 32px*/

}

3.手机端方案的特点

由于分辨率不统一，不同品牌不同设备的屏幕显示比例不同，移动端开发需要做适配的话只能使用等比例放大缩小来进行（这里不考虑响应式，只是在接近的分辨率中进行比较）。

4.使用JS动态调整REM

如果想通过缩放来显示内容，就必须与显示的宽度（innerWidth）有关系。但是像上面的说的，这几个单位除了vw之外都和显示宽度没有关系。然而，vd目前浏览器兼容性很差，别说手机，就是电脑浏览器都有些不兼容。因此，就有人想出使用JS来获取显示宽度进行设 置。只需要在html页面中，加载css文件之前添加以下代码

<script>

document.write(`<style>html{font-size:${document.innerWidth}px;}</style>)；

</script>

在此之后可以利用1rem=innerWidth来进行布局，这个时候1rem=100vd。如果觉得小数太小了写着不方便也可以取font-size==｛doucment.innerWidth/10｝,注意，这里不要用100的，因为有的浏览器会设置最小字体，比如chrome浏览器默认最小为12px，当设置小于这个值的时候会不生效

5.REM与其他单位同时存在

当使用rem的时候不影响其他的单位使用，有时候考虑到以rem为单位的换算成px可能不到一像素，这个时候还是使用px为单位。

REM——适合移动开发的自适应方案的更多相关文章

  1. 有了这套flexible.js 移动端自适应方案，你就能在移动端的来去自如， (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  2. CSS9:动态 REM-手机专用的自适应方案

    CSS9:动态 REM-手机专用的自适应方案 动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是专门的手机端, ...

  3. 适合前端开发的 Chrome 扩展有哪些？（十款）

    适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结 好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMASc ...

  4. 移动开发发展方向-----Hybird混合开发3大方案

    移动开发发展方向-----Hybird混合开发3大方案

  5. finereport普通报表的移动端自适应方案

    移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本. 首先,了解一下当前我们可 ...

  6. Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构

    分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...

  7. 如何通过 WebP 自适应方案减少图片资源大小

    前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能 ...

  8. 为什么使用dojo？dojo与jquery有什么不同？dojo适合什么开发场景？

    首先介绍一下dojo的特性: 1.Dojo是一个符合AMD规范的企业级框架(dojo是一个重量级框架) 2.Dojo全面支持异步加载JS机制(即:支持通过require异步加载JS模块,通过defin ...

  9. 原生js移动端字体自适应方案

    自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, ...

随机推荐

  1. Storage 002 电商数据库设计

    [用户模块] 账户登录:邮箱/用户名/已验证手机 密码 如果将所有字段都放到一张表里存储? 数据插入异常        只想插入一个值的  由于需要主键信息,插入的一行变成新的一行,和原来的记录无关. ...

  2. MyEclipse打不开 报xxxxxx. log。

    1.找到MyEcliPse安装目录下configuration文件夹 打开 2.删除org.eclipse.update这个文件夹 3.再打开org.eclipse.osgi/.manager 4.删 ...

  3. Apache Storm

    作者:jiangzz 电话:15652034180 微信:jiangzz_wx 微信公众账号:jiangzz_wy 背景介绍 流计算:将大规模流动数据在不断变化的运动过程中实现数据的实时分析,捕捉到可 ...

  4. Ubuntu通过ADB连接手机

    参考 ubuntu14.04 下android studio连接手机 安装 adb $sudo apt install adb $sudo lsusb 得到ID为 Bus Device : ID 12 ...

  5. CentOS下RPM方式安装MySQL5.6(转载)

    之前的项目全都在windows系统环境下部署的,这次尝试在Linux系统环境下部署,于是这次我们组织在7台主机上安装了JDK.Maven.Jboss其中一台安装了Mysql,并将局域网配置好,终于大功 ...

  6. 普通用户授予select any table 权限

    基于应用的需要,让普通用户有访问sys表的权限,于是就想到了select any table 的权限,可是当授权以后发现还是不能访问sys的表,经过查一系列资料,发现select any table不 ...

  7. 3D Slicer中文教程（七）—图像中值滤波

    1.中值滤波概念 中值滤波是对一个滑动窗口内的诸像素灰度值排序,用其中值代替窗口中心象素的原来灰度值,它是一种非线性的图像平滑法,它对脉冲干扰级椒盐噪声的抑制效果好,在抑制随机噪声的同时能有效保护边缘 ...

  8. linux查找删除某天前的文件（转载）

    语句写法:find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 例1: 将/usr/local/backups目录下所有10天前带 ...

  9. 手把手设计MyBatis

    最近趁热打铁,研究了一下Mybatis.MyBatis框架的核心功能其实不难,无非就是动态代理和jdbc的操作,难的是写出来可扩展,高内聚,低耦合的规范的代码. 本文完成的Mybatis功能比较简单, ...

  10. python单元测试框架unittest总结

    unittest.TestCase:TestCase类,所有测试用例类继承的基本类. class BaiduTest(unittest.TestCase): TestCase类的属性如下: setUp ...