CSS字體大小沒有被應用在移動

HTML

<div class="footer"> 

    <div class="terms"> 
     <a href="terms.html" class="footer-text">Terms of Service</a> 
    </div> 

    <div class="contact"> 
     <a href="mailto:[email protected]?Subject=theWhoZoo%20query" target="_top" class="footer-text"><img class="email-icon" alt="Email" src="images/icon_email.png">[email protected]</a> 
    </div> 

</div>

CSS

.footer-text { 
    font-size: 85%; 
}

當我在瀏覽器中運行這個我的Mac或PC，它完美的工作，即字體是正確的大小。但是，在手機上的Chrome中，字體爲100％，即85％沒有被應用。

如果任何人都可以告訴我應該怎樣，而組織我的代碼，我將不勝感激。

來源

2017-06-13 Richard

如何有你定義了全局字體大小？像你有某種形式的身體{font-size 16px;}？此外，你使用像素爲您的字體大小或EM？我會建議他們，因爲它是可擴展的。 – Rubenxfd

嗨Ruben，我沒有定義全局'font-size'。 – Richard

，你可以嘗試這樣的事情，

.footer-text { 
    font-size: 1vw; 
} 
// you can try either, 
.footer-text { 
    font-size: 2em; 
}

1vw = 1視寬％

1vh = 1視口的高度％

1vmin = 1vw或1vh，取其較小者

1vmax = 1vw或1vh，以較大者爲準

來源

2017-06-13 07:05:00

我將其更改爲'font-size：1em;'，這在桌面瀏覽器上看起來不錯，但在移動瀏覽器上仍然太大。（見www.thewhozoo.com）。 – Richard

嘗試。那是我用來做的。它會響應地縮放字體大小 –

謝謝'vw'的作品。 – Richard

For這種情況下，你可以嘗試引導。對於很多功能，還可以使用引導CSS和JQuery。

嘗試是這樣的：

@media (min-width: 400px) 
    { 
     .footer-text 
     { 
      font-size: 40px; 
     } 
    } 

    @media (min-width: 500px) 
    { 
     .footer-text 
     { 
      font-size: 80px; 
     } 
    } 

    @media (min-width: 600px) 
    { 
     .footer-text 
     { 
      font-size: 100px; 
     } 
    }

來源

2017-06-13 07:25:05

有關於響應分辨率的問題把那行頭文件

<meta name="viewport" content="width=device-width, initial-scale=1.0">

後作出響應與媒體查詢

來源

2017-06-13 10:29:18 shammidevd

CSS字體大小沒有被應用在移動

回答

相關問題