一、rem介绍

rem是什么?

它的全称是 font size of the root element (根元素的字体大小)

它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font-size决定了rem的尺寸,也就是说它是一个相对单位,相对于(html)。

浏览器的默认字体?

浏览器的默认的font-size是16px,1rem默认就等于16px。(chrome最小字体为12px)

rem可以做什么及它的应用场景?

用来做web app的屏幕适配,因为不同手机型号的屏幕大小都不同,所以这时候我们就不能用px来做单位,rem是适配不同手机屏幕的一种方案。

设置的font-size来改变rem尺寸

 :root{
font-size:20px;
}
.box{
width:1rem;
height:1rem;
background-color:purple;
}

将根元素html的font-size设置为20px,此时box的宽高都为20px,也就是1rem = 20px

##二、步骤
###1. 首先用js根据不同的视窗宽度动态的改变根元素的font-size
```
//获取视窗宽度(兼容性写法)
let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;

//获取html元素

let rootDom = document.querySelector('html');

//动态设置html的font-size(除以10是让浏览器的font-size达到比较合适目的)

rootDom.style.fontSize = rootWidth / 10 + 'px';

<br>
###2. 根据设计师的设计稿中的px单位转换成rem单位
<br>
####如何正确的通过px值计算rem值
<br>
**px单位 / font-size【动态】 = rem单位【动态】 (错误的想法,有的小伙伴迷糊在这里)**
**px单位 / font-size【固定】 = rem单位【固定】 (正确的想法,有的小伙伴可能开始想不明白)**
***这里要注意的是你计算的font-size是固定的,而不是html的font-size是固定的,很多新人困惑在这里***
<br>
<br>
**错误的计算方法:(动态font-size)**
**200px / (320 / 10)【iphone5】 = 6.25rem**
**200px / (375 / 10)【iphone6】 = 5.333rem**
**200px / (768 / 10)【ipad】 = 2.604rem**
<br>
**这样的话**
**在【iphone5】下6.25rem 就是200px**
**在【iphone6】下5.333rem 就是200px**
**在【ipad】下2.604rem 就是200px**
<br>
我们通过了***(图纸的px值 和 动态的font-size值)求出了动态的rem***
<br>
**按照这样的方式设置rem,在不同的尺寸的机型下都是500px,那我还不如直接写死500px,因为屏幕的尺寸大小都是不同的,所以我们这样做毫无意义。(相当于我们根据一个固定的px值求不同机型下的rem值)。**
<br>
<br>
**正确的计算方法:(固定font-size)以iphone6为基准**
**200px / (375 / 10)【iphone6】 = 5.333rem**
<br>
**这样的话**
<br>
**在【iphone5】下5.333rem 就是170px**
**在【iphone6】下5.333rem 就是200px**
**在【ipad】下5.333rem 就是410px**
<br> **也可以以【iphone5】为基准**
**200px / (320 / 10) 【iphone5】 = 6.25rem**
<br>
**这样的话**
<br>
**在【iphone5】下6.25em 就是200px**
**在【iphone6】下6.25rem 就是234px**
**在【ipad】下6.25rem 就是480px**
<br>
<br>
**这样就达到用rem来适配不同尺寸的屏幕了**
<br>
**我们以一种机型的font-size为基准,来计算出一个固定的rem,根元素html的font-size是动态的,所以这个rem值会根据不同机型的font-size达到适配的目的(注意:你参与计算的font-size值绝不能是动态的,否则毫无意义)。**
<br>
**设计师常选择iPhone6作为基准设计尺寸,我们一般以iPhone6为基准**

CSS3中的rem单位的更多相关文章

  1. 如何在手机项目中使用rem单位

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  2. Css3中自适应布局单位vh、vw

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  3. CSS3中的Rem值与Px之间的换算

    bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...

  4. CSS3 中的 rem 值与 px 之间的换算

    想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...

  5. css3中的相关单位

    引用地址 :http://blog.csdn.net/jyy_12/article/details/42557241

  6. 理解并使用CSS3中的单位rem vh vw vmin vmax

    rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...

  7. [css] CSS3中的单位

    FROM http://www.qianduan.net/understand-the-unit-of-length-in-the-css.html CSS3中的单位: css3中引入了一些新的单位: ...

  8. rem单位在手机网站中的使用

    em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...

  9. css3中rem和em是干嘛的

    css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...

随机推荐

  1. 让webpack打包支持ES7的async/await语法

    npm install --save-dev babel-plugin-transform-runtime npm install --save babel-runtime .babelrc配置 { ...

  2. MySQL用另一张表的字段值Update本表

    SQL示例: UPDATE TABLE1 a, TABLE2 b SET a.field1 = b. field1 [, a.field2 = b.field2, ...] WHERE a.connn ...

  3. 疯子的算法总结(九) 图论中的矩阵应用 Part 1+POJ3613 Cow Relays

    图的存储有邻接矩阵,那么他就具备一些矩阵的性质,设有一个图的demo[100][100];那么demo[M][N]就是M—>N的距离,若经过一次松弛操作demo[M][N]=demo[M][K] ...

  4. Nmon 监控性能分析

    一.CPU 信息 1.折线图中蓝线为 cpu 占有率变化情况:粉线为磁盘 IO 的变化情况: 2.下面表各种左边的位磁盘的总体数据,包括如下几个: Avg tps during an interval ...

  5. ASP.NET Core的配置信息

    ASP.NET Core的配置信息 Key-Value键值对 内存里.JSON.XML.INI等文件 配置信息与配置系统是解耦的 可以依赖注入 ASP.NET Core的配置信息来源 appsetti ...

  6. CSS页面定制代码+动漫人物设计

    右下角的小人物(我蛮喜欢的) 把下面这段代码粘贴到设置里页脚代码处 在第六行的model左右的名字可选,我这个是叫z16 然后这里有别人的一篇博客有其他名字https://blog.csdn.net/ ...

  7. python工业互联网应用实战1—SQL与ORM

    从sql到ORM应该说也是编程体系逐步演化的结果,通过类和对象更好的组织开个过程中遇到的各种业务问题,面向对象的解耦和内聚作为一套有效的方法论,对于复杂的企业应用而言确实能够解决实践过程中很多问题. ...

  8. 房价预测Task1

    pandas:简单的房价预测实例 我们使用pandas等工具,对于给出的.csv文件进行处理,完成要求的几个Task. 利用sklearn的线性回归,对于房价进行简单的预测. 所有的要求,数据集等文件 ...

  9. CodeForces - 1209D Cow and Snacks 并查集

    CodeForces - 1209D 题意 现在n种点心,每种点心只有一份,有k位客人,每位客人有两种想要吃的点心,你可以安排他们进场的顺序,每位客人会吃掉所有他想要吃的,并且还没被吃掉的点心.如果客 ...

  10. Java TCP小结

    服务端:                                                                                 客户端: ServerSock ...