在响应式设计中使用em

时间:2013-04-12 21:28:53

标签: responsive-design em

我创建了一个自适应网站,并希望使用em来控制字体大小。

我建议将正文字体基本大小设置为64.5%,以创建10px的基础。

但是,虽然大小调整似乎没问题,但它不会随浏览器的大小而改变。我错过了什么?

http://jsfiddle.net/XaUz9/

1 个答案:

答案 0 :(得分:1)

看看这是否对您有所帮助:http://jsfiddle.net/panchroma/qK8j2/

在您的示例中,您明确设置了字体大小,并且在视图更改时没有指示字体缩放的任何内容。

设置
body{ font-size:62.5%; }  只需设置字体大小(相对于浏览器默认设置),它不会导致任何缩放。

你实现你想要的几种方法是设置h1,h2,p等的大小,因为viepoint使用@media queries改变,例如

@media (max-width: 480px) {

h1 {font-size:  2em }
h2 {font-size: 1em}
p{font-size:1em}
}  

或者您可以在不同的视点设置默认的正文字体大小,字体大小将相对于CSS文件头部的设置进行缩放,例如

@media (min-width:481px) and (max-width: 767px) {

body{
font-size:90%;
}  
}   
祝你好运!