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>

当我使用broswer默认步骤（100％，110％，125％，...）从100％放大到500％时，字体大小会在少数第一步中增加，然后在以下某些步骤中减小以不一致的方式。这发生在所有主流浏览器中： - 铬51.0.2704.103 - 即11 - firefox 43.0.1 任何帮助将不胜感激感谢

Answer 1

缩放使字体变大。您的媒体查询使字体变小。这两个人互相争斗。

这种情况发生的原因是当缩放使像素变大时，窗口中的像素更少，这使得较小窗口的媒体查询匹配。

此行为特定于桌面浏览器。移动浏览器不会使用窗口大小进行媒体查询，而是使用屏幕尺寸（roughly）。

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

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

1 个答案: