Question

我几天前制作了一个简单有趣的网站，但我无法在移动设备上调整文字大小。这是我到目前为止所尝试的内容：

＆＃13;

@media only screen and (min-width:320px)  { .output{font-size:0.5em;} }
@media only screen and (min-width:768px)  { .output{font-size:0.8em;} }
@media only screen and (min-width:1024px) { .output{font-size:1em;} }
@media only screen and (min-width:1900px) { .output{font-size:1.5em;} }

＆＃13;

我也在使用：

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

＆＃13;

知道为什么这不起作用？

Answer 1

在查看该网站时，看起来div实际上有一个 ID output ...不是一个类

因此...

@media only screen and (min-width:320px)  { #output{font-size:0.5em;} }
@media only screen and (min-width:768px)  { #output{font-size:0.8em;} }
@media only screen and (min-width:1024px) { #output{font-size:1em;  } }
@media only screen and (min-width:1900px) { #output{font-size:1.5em;} }

是正确的。

Answer 2

您的媒体查询中似乎是在定位课程而不是ID。你的div是<div id="output>所以你需要定位ID'输出'：

@media only screen and (min-width:320px)  { #output{font-size:0.5em;} }
@media only screen and (min-width:768px)  { #output{font-size:0.8em;} }
@media only screen and (min-width:1024px) { #output{font-size:1em;} }
@media only screen and (min-width:1900px) { #output{font-size:1.5em;} }

无法获得@media查询以便在移动设备上调整字体大小

2 个答案: