无法让@media 查询工作以在移动设备上调整字体大小

Question

几天前我做了一个简单有趣的网站，但是我不能让文本在移动设备上调整大小。到目前为止，这是我尝试过的：

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

我也在用：

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

知道为什么这不起作用吗？

Answer 1

在查看该站点时，div 实际上具有 output 的 ID...而不是 class

所以...

@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

看起来您在媒体查询中定位的是 class 而不是 ID。你 div 是 <div id="output> 所以你需要定位 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;} }