我在我的网站顶部有一个工具栏，上面有一些图像和文本链接。我希望文本链接的字体大小改变，以响应小于400px的屏幕大小。我使用@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>