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. JS中JSON和string字符串相互转换

    在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法. JSON.stringify(obj)将JSO ...

  2. CSS3 Background-clip

    上一节在<CSS3 background-size>详细的介绍了CSS3为background新增属性之一,今天和大家一起来学习CSS3中有关于Background的第二新属性Backgr ...

  3. Object Detection / Human Action Recognition 项目

    https://towardsdatascience.com/real-time-and-video-processing-object-detection-using-tensorflow-open ...

  4. JavaScript—对象创建方式

    JavaScript 也是面向对象的语言(oop) 之前学JavaScript 没有学对象.现在做下笔记 创建对象的方式: 1.  对象字面量 const hero = { name: '吕布', w ...

  5. The Ethereum devp2p and discv4 protocol Part II

    描述 本文章主上下两篇 上篇:讲述以太坊devp2p与disc4节点发现协议 下篇:实践篇,实现如何获取以太坊所有节点信息(ip,port,nodeId,client) 正文 本片为下篇:实践篇,主要 ...

  6. Rollup.js 实践

    音乐分享: B.o.B Ft. Marko Penn - <Roll up> ——————————————————————————————————————————————————————— ...

  7. 020_Linux的孤儿进程与僵尸进程(Unix系统编程)

    1.前言 之前在看<unix环境高级编程>第八章进程时候,提到孤儿进程和僵尸进程,一直对这两个概念比较模糊.今天被人问到什么是孤儿进程和僵尸进程,会带来什么问题,怎么解决,我只停留在概念上 ...

  8. 在Vue中使用样式

    ##使用class样式 一共四种方式在注释中有解释 <!DOCTYPE html> <html> <head> <meta charset="utf ...

  9. JQuery插件:ScrollTo平滑滚动到页面指定位置

    1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...

  10. Kali Linux ——在无网络情况下安装无线网卡驱动

    1.背景: 今日刚刚开始学习kali linux,众所周知,安装完成后,系统是没有无线网卡驱动的,这就对学生党造成相当的困扰:校园网要连接有线是需要认证客户端的,而认证客户端只有windows端,如此 ...