css - 无法让@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

在查看 sitem 时，div 实际上有一个 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;} }

是正确的。