em rem 和px使用简单介绍

1.rem是一个非常酷的CSS3属性，它相对于根元素的字体大小适配。

./* Document level adjustments */

html {

font-size: 17px;

}

@media (max-width: 900px) {

html { font-size: 15px; }

}

@media (max-width: 400px) {

html { font-size: 13px; }

}

/* Type will scale with document */

h1 {

font-size: 3rem;

}

h2 {

font-size:2.5rem;

}

h3 {

font-size: 2rem;

}

这样做很简单，但是有点儿想当然。最主要的问题是：你不能指望一个页面上设置的类型，能够满足所有模块的比例要求：大屏幕可能界面元素会显示的非常大，小的又太小。或者甚至相反，大屏幕可能无法显示足够小。遇到这种情况，可以继续用@media query调整大小，但是这样做效率不高，而且会非常混乱。

因此，我的想法是：

1、文档级别依然使用px像素，能够直接有效地检测出分辨率的变化。

2、页面每个模块用rem设置字体大小。因为rem是相对于根元素的字体大小适配。

3、文本元素（H1、H2、p、li等等），如果你调整他们的大小，并用em作为单位，就能和模块大小形成相对比例。“em”作单位时，是一个相对于父元素的值。

/* Document level adjustments */

html {

font-size: 17px;

}

@media (max-width: 900px) {

html { font-size: 15px; {

}

@media (max-width: 400px) {

html { font-size: 13px; }

}

/* Modules will scale with document */

.header {

font-size:1.5rem;

}

.footer {

font-size:0.75rem;

}

.sidebar {

font-size:0.85rem;

}

/* Type will scale with modules */

h1 {

font-size: 3em;

}

h2 {

font-size:2.5em;

}

h3 {

font-size: 2em;

}

这样你可以设置一个模块级别的字体大小，这是非常容易的。

当然IE6-8是不支持CSS3的rem属性的。移动端的话也不需要考虑这个问题。