html5中px和em的区别,px、em、rem的区别

px、em、rem的区别

1、px

是网页布局的相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

使带道术用量确示常构端析以要效开的用，近不用px设置的尺寸在不同的显示屏中尺寸不同，跟像素密度有关系； 如果缩放会有所影要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标响

px特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

2、em

是一种相对长度单位，参照当前元素的字号，如果没有设置，

就参照父容器或者当前浏览器的默认的字号；盒子尺寸因父盒子改变而改变的

em特点

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

3、rem

是css3新增的一种相对长度单位，但只参照根元素html的字号

(需申明html{font-size：值；})；

盒子尺寸因父盒子改变或者字号改变而不可变，只针对html改变，

相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身

使带道术用量确示常构端析以要效开的用，近不用px设置的尺寸在不同的显示屏中尺寸不同，跟像素密度有关系； 如果缩放会有所影要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标响

rem是参考根标签html的字号来改变

em是参考当前的字号，如果没设置，参考父级元素或浏览器的字号

注：web的字号最小是12px，所以不能设置字号为小于12px

rem是参考根标签html的字号来改变

html {

font-size: 12px;

}

body {

margin: 10px 50px;

}

.px {

width: 100px;

height: 100px;

background-color: #fcf;

margin-top: 10px;

}

.box {

width: 10rem;

height: 10rem;

background-color: #ccc;

/* 当前字体不会改变尺寸 */

font-size: 20px;

margin-top: 10px;

}

.box1 {

width: 10em;

height: 10em;

background-color: #f40;

font-size: 15px;

margin-top: 10px;

}

.box2 {

font-size: 5rem;

background-color: #acd;

}

本文来源于网络：查看 >https://blog.csdn.net/superaistar/article/details/83018527