CSS3中的rem单位
一、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单位的更多相关文章
- 如何在手机项目中使用rem单位
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...
- Css3中自适应布局单位vh、vw
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
- CSS3中的Rem值与Px之间的换算
bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素<html>, 比如假设,我们设置html的字体大小的值为html{font- ...
- CSS3 中的 rem 值与 px 之间的换算
想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...
- css3中的相关单位
引用地址 :http://blog.csdn.net/jyy_12/article/details/42557241
- 理解并使用CSS3中的单位rem vh vw vmin vmax
rem vh vw vmin vmax做为CSS3中的新单位,其实都出来挺久的了,这篇文章将总结并理解下它们. rem 如果你给body设置了font-size字体大小,那么body的任何子元素的1e ...
- [css] CSS3中的单位
FROM http://www.qianduan.net/understand-the-unit-of-length-in-the-css.html CSS3中的单位: css3中引入了一些新的单位: ...
- rem单位在手机网站中的使用
em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...
- css3中rem和em是干嘛的
css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...
随机推荐
- 让webpack打包支持ES7的async/await语法
npm install --save-dev babel-plugin-transform-runtime npm install --save babel-runtime .babelrc配置 { ...
- MySQL用另一张表的字段值Update本表
SQL示例: UPDATE TABLE1 a, TABLE2 b SET a.field1 = b. field1 [, a.field2 = b.field2, ...] WHERE a.connn ...
- 疯子的算法总结(九) 图论中的矩阵应用 Part 1+POJ3613 Cow Relays
图的存储有邻接矩阵,那么他就具备一些矩阵的性质,设有一个图的demo[100][100];那么demo[M][N]就是M—>N的距离,若经过一次松弛操作demo[M][N]=demo[M][K] ...
- Nmon 监控性能分析
一.CPU 信息 1.折线图中蓝线为 cpu 占有率变化情况:粉线为磁盘 IO 的变化情况: 2.下面表各种左边的位磁盘的总体数据,包括如下几个: Avg tps during an interval ...
- ASP.NET Core的配置信息
ASP.NET Core的配置信息 Key-Value键值对 内存里.JSON.XML.INI等文件 配置信息与配置系统是解耦的 可以依赖注入 ASP.NET Core的配置信息来源 appsetti ...
- CSS页面定制代码+动漫人物设计
右下角的小人物(我蛮喜欢的) 把下面这段代码粘贴到设置里页脚代码处 在第六行的model左右的名字可选,我这个是叫z16 然后这里有别人的一篇博客有其他名字https://blog.csdn.net/ ...
- python工业互联网应用实战1—SQL与ORM
从sql到ORM应该说也是编程体系逐步演化的结果,通过类和对象更好的组织开个过程中遇到的各种业务问题,面向对象的解耦和内聚作为一套有效的方法论,对于复杂的企业应用而言确实能够解决实践过程中很多问题. ...
- 房价预测Task1
pandas:简单的房价预测实例 我们使用pandas等工具,对于给出的.csv文件进行处理,完成要求的几个Task. 利用sklearn的线性回归,对于房价进行简单的预测. 所有的要求,数据集等文件 ...
- CodeForces - 1209D Cow and Snacks 并查集
CodeForces - 1209D 题意 现在n种点心,每种点心只有一份,有k位客人,每位客人有两种想要吃的点心,你可以安排他们进场的顺序,每位客人会吃掉所有他想要吃的,并且还没被吃掉的点心.如果客 ...
- Java TCP小结
服务端: 客户端: ServerSock ...