css3。0 rem

CSS是前端工程师必备的技能之一。而CSS3是CSS的最新版本，其中包含了许多新的特性。其中之一就是rem（root em）单位。

p{
font-size: 16px;
}
p.slogan{
font-size: 2rem;
}

rem和em很相似，都是相对单位。em是相对于父元素的font-size，而rem是相对于根元素（html）的font-size。这意味着我们只需要设置一次根元素的font-size，其他元素的字体大小就可以使用rem进行设置，无需再考虑嵌套关系。这样在开发响应式网站时非常方便。

html{
font-size: 16px;
}
@media (min-width: 768px){
html{
font-size: 18px;
}
}
p{
font-size: 1rem; /*16px*/
}
p.slogan{
font-size: 2rem; /*32px*/
}

上面的代码中，我们设置根元素的font-size为16px。当屏幕宽度达到768px时，我们将根元素的font-size增加到18px。这样，除了p.slogan的字体大小是2rem，其他元素的字体大小都是按照16px计算的。

总结：使用rem作为字体大小的单位可以极大地方便响应式网站的开发。我们只需要设置一次根元素的font-size，其他元素可以按照比例进行调整。同时，这样的写法也更符合设计稿的标准字体大小，因为设计稿的标准字号一般是根据16px进行设置的。

查看更多关于css3。0 rem的详细内容...