html里%和em还要rem,CSS中的px、em和rem有什么区别

我们在使用框架模板时，会发现css文件中表示尺寸的有px、em和rem这三种，国外的网站大都喜欢用em和rem，而国内的网站一般是使用px，那么它们之间有什么区别？

本教程主要是讲解CSS中px、em和rem的区别和联系。

px

Pixel像素，相对长度单位。像素是相对于显示器分辨率而言。

em

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

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em= 16px。有时为简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10，然后换上em作为单位即可。

em特点：

em的值并不是固定的。

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

你猜我字体是多大？

/******css样式*********/

html{

font-size:62.5% // font-size:10px 1em:10px

}

div{

font-size:1.2em //font-size: 10 *1.2 =12px

}

p{

font-size:1.2em //font-size= 12*1.2=14.4px

}

rem

rem是CSS3新增的一个相对单位(root em，根em)，这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，虽然仍是相对大小，但相对的只是HTML根元素。通过rem，既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前除IE8及更早版本外，所有浏览器均已支持rem。对于不支持的浏览器，可以多写一个绝对单位的声明。如此浏览器会忽略rem设定的字体大小。

p{

font-size:14px;

font-size:2rem;

}

注意：

html设置为62.5%或者10px时会失效，是因为 小于12px或者75%的字体大小 不支持换算。这可能与有些浏览器不支持12px以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。

px,em,rem转换进阶版

px，em,rem 在线转换工具：地址：http://pxtoem.com/

尺寸自适应转换js脚本：

//兼容UC竖屏转横屏出现的BUG

//自定义设计稿的宽度：designWidth

//最大宽度:maxWidth

;(function(designWidth, maxWidth) {

var doc = document,

win = window;

var docEl = doc.documentElement;

var tid;

var rootItem,rootStyle;

function refreshRem() {

var width = docEl.getBoundingClientRect().width;

if (!maxWidth) {

maxWidth = 540;

};

if (width > maxWidth) {

width = maxWidth;

}

var rem = width * 100 / designWidth;

rootStyle="html{font-size:"+rem+'px !important}';

rootItem = document.getElementById('rootsize') || document.createElement("style");

if(!document.getElementById('rootsize')){

document.getElementsByTagName("head")[0].appendChild(rootItem);

rootItem.id='rootsize';

}

if(rootItem.styleSheet){

rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)

}else{

try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}

}

docEl.style.fontSize = rem + "px";

};

refreshRem();

win.addEventListener("resize", function() {

clearTimeout(tid); //防止执行两次

tid = setTimeout(refreshRem, 300);

}, false);

win.addEventListener("pageshow", function(e) {

if (e.persisted) { // 浏览器后退的时候重新计算

clearTimeout(tid);

tid = setTimeout(refreshRem, 300);

}

}, false);

if (doc.readyState === "complete") {

doc.body.style.fontSize = "16px";

} else {

doc.addEventListener("DOMContentLoaded", function(e) {

doc.body.style.fontSize = "16px";

}, false);

}

})(750, 750);

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/1086.html