Question

我希望创建一个可以在所有设备上使用的响应式设计

我的css包含以下内容：

@media screen and (min-width: 200px) and (max-width: 400px) {
    html {
        font-size: 8px;
    }
}

@media screen and (min-width: 400px) and (max-width: 800px) {
    html {
        font-size: 12px;
    }
}

@media screen and (min-width: 800px) and (max-width: 1600px) {
    html {
        font-size: 16px;
    }
}

#banner h3 {
    font-size: 3.125em;
    letter-spacing: 0.3125em;
    font-weight: 900;
    text-shadow: black 0 0.0753125em 0;
}

我的理解是，如果我在不同媒体大小的html级别设置字体大小，那么使用em将确保为每个元素相应地调整它。

因此，在我的桌面上，#banner h3显示为50px（16px * 3.125）。

但是，当我将浏览器最小化到700px时，我预计h3的大小会减小，但这种情况不会发生。

这是我的网站：http://ec2-52-0-228-105.compute-1.amazonaws.com/

我在这里缺少什么？

Answer 1

我认为您正在寻找rem，而不是em。

em中的值是相对于（最接近的）父元素（或元素的字体大小）的字体大小，如果父元素具有固定的字体大小（在{中）例如，{1}}然后px将保持一致。

但是em（root-em）直接相对于根元素的rem的值。在HTML中，根元素是font-size。

<html>

值得一提的是，IE9 +支持#banner h3 { font-size: 3.125rem; letter-spacing: 0.3125rem; font-weight: 900; text-shadow: black 0 0.0753125rem 0; }。

Answer 2

font-size: 14px;上有body。 body是html的子元素，这就是覆盖font-size的{{1}}的原因。

html是指具有字体大小的最近父元素的字体大小，在您的情况下是em。

似乎身体风格来自wordpress主题或其他东西。如果您不想更改相应的css文件，可以更改代码以覆盖正文：

body

另一种可能性是使用@media screen and (min-width: 200px) and (max-width: 400px) { body { font-size: 8px !important; } } @media screen and (min-width: 400px) and (max-width: 800px) { body { font-size: 12px !important; } } @media screen and (min-width: 800px) and (max-width: 1600px) { body { font-size: 16px !important; } }代替rem，而不是100％与浏览器兼容：http://caniuse.com/#feat=rem

Answer 3

正如其他答案所说，您应该使用rem单位来匹配根元素（html标记）的大小。

但实现您打算做的更快捷的方法是使用vw CSS3单位，该单位等于视口宽度的1％。因此，您根本不必使用媒体查询。

使用em和媒体查询来设置相对字体大小

3 个答案: