在响应式设计中使用 em

Question

我创建了一个响应式网站，并希望使用 em 来控制字体大小。

我已按照建议将正文字体基本尺寸设置为 64.5%，以创建 10 像素的基本尺寸。

但是，虽然大小看起来不错，但它不会随着浏览器的大小而改变。我错过了什么？

http://jsfiddle.net/XaUz9/

Answer 1

看看对你有没有帮助：http://jsfiddle.net/panchroma/qK8j2/

在您的示例中，您已经明确设置了字体大小，并且没有任何内容指示字体随着视点的变化进行缩放。

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

实现所需的几种方法是使用 @media queries 设置 h1、h2、p 等的大小，例如

@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%;
}  
}   

祝你好运！