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

Question

网站 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;
}
}

任何人都可以帮忙吗？

Answer 1

将查询更改为：

@media屏幕和(最大宽度：480px({}

Answer 2

在桌面上调整浏览器窗口大小时，页面似乎按预期工作，如果您希望文本更快地更改大小，也许可以更改最大宽度值。另外，请记住，大多数现代智能手机都有相当高分辨率的显示屏，因此在屏幕宽度为 1080px 的手机上，您的代码将不起作用，因此您还需要定义媒体类型(这可能是错误的名称(。

试试这个：

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