首页 > 代码库 > 浅谈rem、em、px

浅谈rem、em、px

1、px:像素(Pixel)

px是相对长度单位,他是相对于显示器屏幕分辨率而言的

优点:比较稳定、精确

缺点:在浏览器 中放大或者缩小浏览页面,会出现页面混乱的情况。

如下例子:

.buttonPX{
width:100px;
height:60px;
line-height:60px;
display: inline-block;
font-weight:bold;">#00a0b6;
-webkit-border-radius:90px;
-moz-border-radius:60px;
border-radius:15px;
font-size:24px;
color:#fff;
text-decoration: none;
text-align: center;
border:none
}
<button type="button" class="buttonPX">确定</button>
效果:

技术分享

 

2、em:是相对长度单位

em是相对于父元素来设计字体大小的,如果当前对行内文本的字体尺寸为被人为设置,则em是相对于浏览器的默认字体尺寸。浏览器默认的字体是16px,所以未经调整的浏览器都符合 1em = 16px,为了方便使用em时,通常在css的body中声明font-size=62.5%(16*62.5%=10px)

缺点:em的值并不是固定的,他会继承父元素的字体大小

 如同样设置48px的字体,设置父元素的大小和不设置父元素的大小的区别

.box1{
font-size:12px;
}
.buttonEm{
width:200px;
height:60px;
line-height:60px;
display: inline-block;
font-weight:bold;">#00a0b6;
-webkit-border-radius:90px;
-moz-border-radius:60px;
border-radius:15px;
font-size:4em;//注意此处
color:#fff;
text-decoration: none;
text-align: center;
border:none
}
.buttonEm2{
width:200px;
height:60px;
line-height:60px;
display: inline-block;
font-weight:bold;">#00a0b6;
-webkit-border-radius:90px;
-moz-border-radius:60px;
border-radius:15px;
font-size:3em; //注意此处
color:#fff;
text-decoration: none;
text-align: center;
border:none
}
<div class="box1">
<button type="button" class="buttonEm">确定</button> //设置了父元素的字体大小
</div>
<br>
<div class="box2">
<button type="button" class="buttonEm2">确定</button> //未设置父元素的字体大小
</div>
如果将其中的宽度等其他元素也改为em单位,则width=10em的实际宽度为width=48(行内文本字体的尺寸)*10 = 480px,也就是width的基本单位1em=fontsize的大小

3、rem (root em,根 em)

rem是相对单位,是相对与html根节点的单位

 rem 主要是通过html 节点的fontsize确定的,所以不存在逐层复合的连锁反应

在JS的window.resize 事件中,动态的控制html节点的fontsize的大小,来动态控制rem的比例

设置rem单位的方法

方法一:直接在css样式中写一下代码即可:

html{

font-size:20px; //表示1rem相当于常用的20px,1rem = 20px

}

为了兼容适配不同的屏幕,也可斜成下面这样

html{
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}

方法二:使用js动态的实现此效果

(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘: ‘resize‘,
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;

if (clientWidth > 1920) {
clientWidth = 1920;
docEl.style.fontSize = 25 * (clientWidth / 1200) + ‘px‘; //font-size=25
}
else if (clientWidth > 900) {
docEl.style.fontSize = 25 * (clientWidth / 1200) + ‘px‘;//font-size = 25
}
else if (clientWidth >= 320) {
docEl.style.fontSize = 100 * (clientWidth / 500) + ‘px‘;//font-size = 100
}
else if (clientWidth >= 320) {
clientWidth = 320;
docEl.style.fontSize = 100 * (clientWidth / 500) + ‘px‘;//font-size = 100
}
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

 除了ie8以外,其他的都兼容rem

 

浅谈rem、em、px