理解CSS中用於響應式設計的文本大小調整
[英]Understanding text sizing quirks in CSS for responsive design
問題描述
我試圖理解為什么一些文本隨着屏幕尺寸變小而變小，而其他看似相同風格的文本保持不變。
我正在嘗試創建自己的導航欄，我希望我的文本保持與屏幕變小相同的大小（就像引導程序導航欄一樣），但我似乎無法弄清楚如何做到這一點。 我檢查源，我不明白使用什么屬性。
例如，我有兩個幾乎相同的HTML，但文本大小調整行為有很大的不同，我不知道為什么。
沒有樣式，這是一個文本的主體，其大小與屏幕尺寸相同：
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
<h2>Resize the browser window to see the effect.</h2>
</body>
如果我刪除其中一個段落，或者甚至只刪除h2 ，那么隨着屏幕尺寸的減小，文本會變小，為什么會這樣？
這里有兩個代碼，顯示我正在談論的行為。 如果您使用Chrome的設備工具欄更改屏幕尺寸來測試響應式設計，您會發現這兩個不同的代碼段顯示調整大小的文本的行為方式不同。 盡管如此，如果您只調整瀏覽器本身的大小而不使用Chrome的設備工具欄，它們的行為是否相同？ 所以也許你可以看到我是如何混淆的：
https://codepen.io/mhlroy/pen/oVoyeN
https://codepen.io/mhlroy/pen/eXeKxX
這是一個導航欄的例子我試圖讓文本保持與屏幕尺寸相同的大小，我希望它保持不變，我將使用媒體查詢進行必要的調整，並使菜單成為一個漢堡菜單例如： https ： //codepen.io/mhlroy/pen/OqOEGO
我想要的只是文本保持相同的大小。 我見過有人提到使用vh作為font-size 。 而且我想我可以使用它，但是現在嘗試它似乎會使文本大小隨着屏幕尺寸的減小而變大，所以我仍然不確定。
如有任何幫助，我們將不勝感激！
謝謝。
2 個解決方案
解決方案1
1 2019-03-14 03:34:19
正如arieljuod在我的最初的問題的評論中提到，投入<meta name="viewport" content="width=device-width, initial-scale=1.0"/>在head固定我的問題。
現在它的工作更加一致，正如我個人所期望的那樣，當屏幕尺寸發生變化時，不會縮小頁面。
解決方案2
0 2019-03-13 03:16:08
我要告訴你的第一件事是要知道哪些尺寸單位是相對的，哪些是固定的。 在vh調整文本大小就是說我的文字是屏幕高度的百分比。 當然，當屏幕改變高度時，文本大小會發生變化。 您應該使用與屏幕尺寸無關的單位。 選項包括但不限於像素大小（ px ）或rems（ rem ）。 rem是一個相對單位，但它相對於根（ body ）字體大小，只有在更改時才會更改。 希望有所幫助！
IE中的CSS圖像大小調整…響應式設計
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.