Question

我在自定义<h2>课程时遇到问题，该课程用于针对手机的文字响应

我希望在移动设备上查看此h2课程时将其大小调整为49px。

这是我迄今为止所尝试过的：

@media screen and (min-width: 320px) {
    h2.josh {
       text-size:49px;}


h2.josh {

    -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
     font-size: 79px;
color:white;
font-family: 'Oswald', sans-serif;
    opacity: 0.9;
 display:inline-block;
 display:inline-block}
 .dark-text{color: #1e1e1e}
 body { padding-top: 0px !important; }

Answer 1

您在媒体查询

后缺少结束花括号

@media screen and (min-width: 320px) {
    h2.josh {
       text-size:49px;
    }
}

Answer 2

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { h2.josh { font-size:49px !important; } }

你最后错过了一个括号。并尝试使用！imporant与样式规则，因为你可能在元素本身中应用了样式规则！

Answer 3

首先，不要使用！important。这不是一个好习惯。一旦你关闭媒体查询它应该工作。此外，继续使用最小宽度而不是最大宽度。现代发展应该是移动优先的，最小宽度是最佳实践。

Answer 4

什么是

text-size:49px; /*should be **font**-size*/

也可以在之前的另一个css之后调用此@media查询，否则您将不得不搜索整个文档以进行覆盖。总是在最后加载这些并且你已经放了最小宽度？在这种情况下，你应该使用max-width并使用640px或720作为移动设备等。因此，除了eill之外的所有内容都采用这种风格，并且最后加载它将采用。

使文字大小h2响应移动设备

4 个答案: