使用媒体查询和浏览器缩放时字体大小不一致

Question

我创建了以下 html 页面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width"  />
    <style>
        @media only screen and (max-width: 320px)
        {
            .text
            {                
                font-size:0.3em;
            }
        }
        @media only screen and (min-width: 321px) and (max-width: 480px)
        {
            .text
            {                
                font-size:0.6em;
            }
        }
        @media only screen and (min-width: 481px) and (max-width: 600px)
        {
            .text
            {                
                font-size:0.9em;
            }
        }
        @media only screen and (min-width: 601px) and (max-width: 768px)
        {
            .text
            {                
                font-size:1.2em;
            }
        }
        @media only screen and (min-width: 769px) and (max-width: 1024px)
        {
            .text
            {                
                font-size:1.5em;
            }
        }
        @media only screen and (min-width: 1025px) and (max-width: 1200px)
        {
            .text
            {                
                font-size:1.8em;
            }
        }
        @media only screen and (min-width: 1201px)
        {
            .text
            {                
                font-size:2em;
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="text">            
            text text text text
        </div>
    </form>
</body>
</html>

当我使用浏览器默认步骤（100%、110%、125%、...）从 100% 放大到 500% 时，字体大小在最初的几个步骤中增大，然后在某些步骤中减小以不一致的方式执行以下步骤。这发生在所有主要浏览器中： - chrome 51.0.2704.103 - 即 11 - 火狐 43.0.1 任何帮助将不胜感激谢谢

Answer 1

缩放使字体变大。您的媒体查询使字体变小。这两个互相打架。

发生这种情况是因为当缩放使像素变大时，适合 window 的像素变少，这使得媒体查询更小 windows 匹配。

此行为特定于桌面浏览器。移动浏览器不使用 window 大小进行媒体查询，而是使用屏幕大小 (roughly)。

在其他字体大小奇怪的情况下，可能是因为text-size-adjust。

使用媒体查询和浏览器缩放时字体大小不一致

inconsistent font size when using media queries and browser zoom

html

css

font-size

zooming

media-queries