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吗,其实也当然可以 ...
随机推荐
- ES6中Fetch的封装及使用,炒鸡简单~
之前写过一篇<ajax.axios.fetch之间的详细区别以及优缺点> 戳这里 1.封装 (http.js) class Ajax { get(url) { return new Pro ...
- Python-四则运算-蔡晓晴,杜婷萱
github链接:https://github.com/Amy-CC/Arithmetic-Operation 一.需求 1.使用-n 参数控制生成题目的个数 2.使用-r 参数控制题目中数值(自然数 ...
- Spring依赖注入—@Resource注解使用
1.@Autowired默认按类型装配(这个注解是属业spring的),默认情况下必须要求依赖对象必须存在,如果要允许null 值,可以设置它的required属性为false,如:@Autowire ...
- docker 生产环境基础应用
项目背景 此项目是在已有项目基础上,开发的一套相对独立的系统.项目总体分为三部分,前端.中间应用服务.流媒体服务.前端技术选型为vue+elementui,中间应用服务为.net core webap ...
- P1725 琪露诺(单调队列优化)
描述:https://www.luogu.com.cn/problem/P1725 小河可以看作一列格子依次编号为0到N,琪露诺只能从编号小的格子移动到编号大的格子.而且琪露诺按照一种特殊的方式进行移 ...
- oracle常用数学函数
数学函数 ABS:(返回绝对值) --返回绝对值 select abs(-1.11) from dual; CEIL:(向上取整) --向上取整 select ceil(3.1415) from du ...
- Coursera课程笔记----计算导论与C语言基础----Week 7
C语言中的数据成分(Week7) 内存 把内存想象成长带,带子上有许多方格,每个方格有8位(8bit) 2^10 = 1024 1B = 8 b 1KB = 1024Byte MB.GB.TB.PB- ...
- 闲来无事做个C#小项目——1
2020-05-10 12:25:47 项目背景就是最近和一些朋友在玩一个游戏,游戏中有一个囤货的东西,就是买进卖出的,然后为了方便计算,所以就先写一个简单的计算器用来算账, 这是界面图(最初形态,没 ...
- Linux内核驱动学习(一)编写最简单Linux内核模块HelloWorld
文章目录 准备工作 什么是内核模块 编写 hello.c 模块编译 相关指令 测试结果 模块加载 模块卸载 准备工作 在进行以下操作前,首先我准备了一台电脑,并且安装了虚拟机,系统是Ubuntu16. ...
- Hexo 博客利用 Nginx 实现中英文切换
本文记录了对 Hexo 博客进行中英文切换的配置过程,实现同一应用共用模版,任何页面可以切换到另一语言的对应页面,并对未明确语言的访问地址,根据浏览器语言进行自动跳转 实现细则 中英文地址区分 博客中 ...