使用媒體查詢和瀏覽器縮放時字體大小不一致

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-firefox 43.0.1任何幫助將不勝感激，謝謝

Answer 1

縮放使字體變大。 您的媒體查詢使字體變小。 這兩個人互相斗爭。

發生這種情況是因為當縮放使像素變大時，窗口中容納的像素變少了，這使較小窗口的媒體查詢匹配。

此行為特定於桌面瀏覽器。 移動瀏覽器不使用窗口大小進行媒體查詢，而是使用屏幕大小（大致）。

在其他字體大小很奇怪的情況下，可能是因為text-size-adjust 。

使用媒體查詢和瀏覽器縮放時字體大小不一致

問題描述

1 個解決方案

解決方案1
1 已采納 2016-07-24 11:51:07

使用媒體查詢和瀏覽器縮放時字體大小不一致

問題描述

1 個解決方案

解決方案1 1 已采納 2016-07-24 11:51:07

解決方案1
1 已采納 2016-07-24 11:51:07