时间戳

首页 > 解决方案 > @media 查询中的 CSS 字体大小在旋转后不会变回

css - @media 查询中的 CSS 字体大小在旋转后不会变回

问题描述

我的网站顶部有一个工具栏，其中包含一些图像和文本链接。我希望文本链接的字体大小响应小于 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>

标签： cssmedia-queries

解决方案

@Foxlab 帮助我尝试了一些事情，最终让我意识到这与媒体查询无关。即使删除了这个，iOS 还是决定在旋转和旋转回来时调整文本的大小，即使我没有指定这种行为。这似乎很不可靠，最后我将所有文本链接转换为文本的 SVG 图像，因此它们可以毫无问题地缩放。我可以在它们的 CSS 类中设置图像的高度，并像以前一样根据屏幕的宽度在媒体查询中调整大小。但是现在，使用图像，iOS 尊重我指定的大小，并且不会将其更改为它认为应该的大小。不得不这样做很烦人，但至少它有效。

编辑：预期的行为，现在使用图像而不是文本：https ://i.imgur.com/s7xQOTp.mp4

推荐阅读