【发布时间】：2020-11-14 21:33:48
【问题描述】：
我的网站顶部有一个工具栏，其中包含一些图像和文本链接。我希望文本链接的字体大小响应小于 400 像素的屏幕大小而改变。根据以下来源，我使用@media 查询实现了这一点。它有效，但问题在于手机上的旋转。如果页面是纵向加载的，则应用 @media 查询并且文本会更改大小。当旋转到横向时，@media 查询规则都被正确删除。旋转回纵向时，将重新应用除字体大小之外的所有 @media 查询规则。这意味着文本太大。我已经截屏来展示这个工作：
https://i.imgur.com/TEYORH1.mp4
如果需要，我可以提供更多代码，但目前我无法提供指向该站点的链接。提前感谢您的帮助！
/* CSS */
.toplinks {
font-size:20px;
text-align:center;
}
@media screen and (max-width: 399px) {
.toplinks {
font-size:15px;
text-align:left;
padding-left:60px;
font-family: 'Avenir Next Demi';
}
}
/* HTML */
<div class='footercell toplinks'>
<a href='albums.php' style='pointer-events:auto; '>ALBUMS</a> | <a href='singles.php' style='pointer-events:auto; '>SINGLES</a> | <a href='/epk' style='pointer-events:auto; '>EPK</a>
</div>
【问题讨论】：
-
在调整窗口大小时，它确实可以在桌面浏览器上正常工作；字体大小与@media 查询中的所有其他规则一起来回变化
-
您是否尝试指定方向？ @media（方向：纵向）和（最大宽度：399px）
-
@Foxlab - 刚刚尝试过，它的行为方式相同。问题似乎与选择查询无关，因为 text-align、padding-left 和 font-family 属性在任一方向旋转时都会变回，只有 font-size 属性会卡住
-
好的，还有其他想法 :) 您是否尝试过其他智能手机系统/浏览器，例如 android/chrome（我可以在您的视频中看到这是 IOS）？您是否尝试使用系统字体而不是“Avenir Next Demi”？您是否尝试使用 EM 或 REM 等相对值指定字体大小？
-
我发现了这个 sn-p，我认为这与您的问题有关：
/* Prevents Mobile Safari from bumping up font sizes in landscape */ @media only screen and (max-device-width: 480px) { body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } }
标签： css media-queries