rem、em、px的区别，详细介绍rem与px的转换

PX：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

EM：em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。

注意：em的值是不固定的，em会继承父元素的字体大小

REM：rem是相对长度单位，相对于根元素（即html元素）的font-size计算值的倍数。

嗯、先看看rem的兼容性，如下图。

rem是相对于根元素<html>的font-size,这样就意味着，我们只需要在根元素确定一个参考值，这个参考值设为多少，由我们来定

我们知道，浏览器默认的字号是16px，如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

注意：任意浏览器的默认字体都是16px。所有未经调整的浏览器都符合1rem=16px

所以假定我们让一个div的宽度为2em,那么把它换算成px，width：32px，同理，假如一个设计稿为宽度48px，高度为60px，则换算成rem就是width=48/16=3rem,height=60/16=3.75rem

当然如果我们在css中设置了html根元素的font-size的值，如下所示（为了方便计算，时常将在<html>元素中设置font-size:值为62.5%,也就是16*62.5%=10px）

html{font-size:10px}

那么后面的css里面的rem值就以1rem =10px来换算

所以假定我们让一个div的宽度为2em,那么把它换算成px，width：20px，同理，假如一个设计稿为宽度48px，高度为60px，则换算成rem就是width=48/10=4.8rem,height=60/10=6rem

rem、em、px的区别，详细介绍rem与px的转换相关推荐

php div行内块元素,行内元素与块级元素的区别详细介绍
首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比较常用的块级元素,详 ...
c语言strcpy两字符串长度不同,C语言 strcpy和memcpy区别详细介绍
C语言 strcpy和memcpy区别详细介绍 PS:初学算法,开始刷leetcode,Rotate array的预备知识(写的代码Time Limit Exceed难过)于是百度高效算法,本篇作为预 ...
excel简繁切换_详细介绍在Excel中将简体转换成为繁体的方法
繁体字,亦称繁体中文.繁体中文至今已有三千年以上的历史,直到1956年前一直是各地华人中通用的中文标准字.今天就跟着小编一起来看一看:详细介绍在Excel中将简体转换成为繁体的方法. 不知道大家在日常 ...
C++中引用与指针的区别(详细介绍)
转载:http://www.cnblogs.com/tracylee/archive/2012/12/04/2801519.html C++中的引用与指针的区别指向不同类型的指针的区别在于指针类型可 ...
相量和向量的区别详细介绍（并以电路电磁场中的量进行对照说明）
相量和向量的区别正弦量本身是没有方向的标量,为了方便计算而引入相量这种工具,相量表现出了正弦量的有效值和相位:而表示力.电场强度.磁感应强度等的空间向量是有大小.有方向的矢量,箭头代表向量的方向,长 ...
int与Integer的区别详细介绍（包括128陷阱）
一.Integer与int基本介绍 (1)Integer是int的包装类:int是基本数据类型 (2)Integer变量必须实例化后才可以使用,而int变量则不需要 (3)Integer本质上是对对象 ...
Python中bytes和str区别详细介绍
Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文本总是Unicode,由str类型表示,二进制数据则由bytes类型表示.Python 3不会以任意隐式的方式混用str和b ...
Jquery中post与get之间的区别详细介绍
1:GET访问浏览器认为是等幂的 GET访问浏览器认为是等幂的,就是一个相同的URL只有一个结果,相同是指整个URL字符串完全匹配.所以,第二次访问的时候,如果URL字符串没变化浏览器是直接拿出了第 ...
Hive内部表与外部表区别详细介绍
文章转载自:http://www.aboutyun.com/thread-7458-1-1.html 1.创建内部表与外部表的区别是什么? 2.external关键字的作用是什么? 3.外部表与内部表 ...

rem、em、px的区别，详细介绍rem与px的转换

PX：px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

rem、em、px的区别，详细介绍rem与px的转换相关推荐

最新文章

热门文章