我的 CSS 媒体查询在移动设备上不起作用答案

【问题标题】：My CSS media query isn't working on mobile devices我的 CSS 媒体查询在移动设备上不起作用
【发布时间】：2019-01-21 09:00:45
【问题描述】：

网站 http://www.l-evate.co.uk/wellbeing/

气球视频“健康快乐的人创造成功”上的文字在移动设备上应该更小。我也在尝试更改下面的文字。我已经尝试了一切！

尝试仅使用屏幕、最大设备宽度等。似乎没有任何改变文本。

这是我的代码：

@media (max-width: 480px) {
    h3.uppertext {
        color: #ff0000 !important;
        font-size: 18px !important;
        text-align:center;
    }

    .textwidget h4 {

        font-size:18px !important;
        line-height:24px !important;
    }
}

有人可以帮忙吗？

【问题讨论】：

在 chrome 桌面上的链接上没有看到任何问题。另外，请使用 sn-p 发布您的代码并注意以正确的方式粘贴您的代码。附带说明一下，您不应该在 CSS 中使用 !important。更多信息here

标签： css mobile responsive-design media-queries

【解决方案1】：

用 : 更改查询

@media 屏幕和（最大宽度：480 像素）{}

【讨论】：

【解决方案2】：

在桌面上调整浏览器窗口大小时，页面看起来像预期的那样工作，如果您希望文本尽快更改大小，可以更改最大宽度值。另外，请记住，大多数现代智能手机都有相当高分辨率的显示器，因此在屏幕宽度为 1080 像素的手机上，您的代码将无法正常工作，因此您还需要定义媒体类型（这可能是错误的名称） .

试试这个：

@media only screen and (max-width: 480px) {
    h3.uppertext {
        color: #ff0000 !important;
        font-size: 18px !important;
        text-align:center;
    }

    .textwidget h4 {

        font-size:18px !important;
        line-height:24px !important;
    }
}

【讨论】：