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

【问题标题】：Can't get @media queries to work in order to resize font on mobile无法让@media 查询工作以在移动设备上调整字体大小
【发布时间】：2015-03-25 20:32:19
【问题描述】：

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

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

我也在用：

&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;

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

【问题讨论】：

请不要使用maximum-scale=1...不推荐使用，如果人们无法放大，用户体验会很差。
好的，保利，谢谢。我删除了它，但是我仍然无法调整文本大小。
EpK 先生 - 尝试添加 "max-width" 以便每个设备都受到限制。您也可以尝试添加 "max-device-width" 和 "min-device-width" 而不是 "max-width" 或 “最小宽度”.

标签： css mobile responsive-design media-queries

【解决方案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;} }

应该是正确的。

【讨论】：

谢谢你，成功了。不敢相信我没有弄清楚哈哈。

【解决方案2】：

看起来您在媒体查询中定位的是一个类而不是一个 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;} }

【讨论】：