Question

出于某种原因，无论我做什么，我的文字都保持相同的大小，但是......

<div id="box"> </div>

将响应正在查看的设备..：/

链接到我的网站（它只是一个介绍页面）：view-source：http://www.lux-boutique.co.uk/

css页面：http://www.lux-boutique.co.uk/lux.css

我想要回复的文字是：

<p style="height: 12%; padding:0px; margin: 0px; line-height: 1.1em; font-color: black; color: black; text-align: center; font: normal normal normal 350% 'Palatino Linotype',serif;">LUX <br><strike>BOUTIQUE</strike></style>

感谢任何帮助：D：D

Answer 1

内联属性不会使文本响应，因为font-size保持相同的大小。您想要做的是使用媒体查询，例如根据屏幕宽度执行以下代码：

@media all and (min-width: 960px) {
    body{
        font-size: 18px;
    }
}

@media all and (max-width: 959px) and (min-width: 600px) {
    body{
        font-size: 16px;
    }
}

@media all and (max-width: 599px) and (min-width: 320px) {
    body{
        font-size: 12px;
    }

}

或者您可以使用字体大小的EM，它会为您的文本提供响应式字体。示例如下：

h1{
    font-size: 4.236em;
}

h2{
    font-size: 2.618em;
}

资源丰富：https://developer.mozilla.org/en-US/docs/Web/CSS/font-size（转到EM部分）。

Answer 2

我检查了您的网页，发现您使用的是媒体查询的响应文字大小。究竟发生了什么在lux.css上第77行你有：p - 2em！important

您需要覆盖它。你可以做两件事：

从那里删除！important以便应用其他样式，要么在媒体查询中添加重要内容覆盖p标记上的样式。例如：

 @media screen and (max-width: 1020px)
    p {
      font-size: 2em !important;
    }

Answer 3

如果您将CSS与HTML分开，则应使用媒体查询来使字体大小响应。

您的网站字体大小由访问者默认浏览器样式或您设置的大小设置。如果不使用媒体查询，将在所有情况下使用相同的字体大小。

Divs是相同的，但你的div只是按照它被告知的方式（100％的屏幕大小）。

Documentation on media queries ›

CSS Tricks showing how to use media queries for mobile sites ›

CSS inline不会让我的文字变得敏感

3 个答案: