設置字體大小的上限

我正在嘗試製作響應式網站，但我意識到我的一些單詞太大而無法在手機屏幕上顯示。結果，屏幕變得超過100％寬，因此變得可滾動並失去其藝術觸覺。設置字體大小的上限

我該如何避免這種情況？我怎麼知道什麼字體會使我的標題詞跨越移動視圖？什麼是最佳實踐？

來源

2016-02-03 alaboudi

CSS媒體查詢 - 如果谷歌有很多很多或資源 –

如果單詞太長的屏幕尺寸達到預定可使用上，那麼設計有缺陷的。話雖如此，你仍然需要記住邊緣情況，可能使網站可以滾動。你可以發佈一個代碼示例，因爲可能會有幾件事情做到這一點。 – JamieC

嘗試flowtype.js http://simplefocus.com/flowtype/ 這將幫助你在具有靈活的字體大小翻過不同平臺/設備的尺寸。你還可以設置最小和最大尺寸爲您的字體

來源

2016-02-03 09:13:48

添加JavaScript使其響應？這是一個好主意嗎？ – JakobMillah

我認爲是的，如果它在所有瀏覽器/設備上都完美運行 –

但它仍然依賴於javascript。我想現在幾乎每個人都有它。如果javascript被允許，真的不知道「響應式設計」的真正含義是什麼意思。稍後我可能會看看那個javascript。看起來很有趣。 – JakobMillah

您很可能必須設置一些@media屏幕規則;

@media screen and (min-width: 480px) {}

然後，您可以指定特定寬度的基本字體大小。因此，對於每個媒體屏幕，設置字體如;

html{font-size: x pt;}

然後你可以通過添加font-size:x rem;

控制不同的元素特定的字體大小，我認爲這是怎麼幾乎所有的Web開發者做的。沒有得到「不理想」的結果幾乎不可能避免media screen。

另外，不要忘記你的html裏面的<meta name="viewport" content="width=device-width, initial-scale=1.0">。

來源

2016-02-03 08:23:30 JakobMillah

你的意思是不可能避免媒體屏幕獲得所需的結果？ – pratikpawar

@pratikwebdev我加了「幾乎」的原因;）。這真的取決於你的網站上有什麼內容。如果您想要一個適用於所有設備的完全響應式網站，並且在這裏和那裏都有很多文本，那麼您可能別無選擇，只能使用媒體查詢。如果您發現沒有媒體查詢的100％響應的網站，請將其發佈給我。我想看看他們是如何解決它） – JakobMillah

不，不，你的答案是偉大的。我對這個聲明有點困惑，因此澄清了它。 :) – pratikpawar

你可以嘗試word-break: break-all;爲特定的部件。這將允許在一個單詞之間換行。

來源

2016-02-03 08:27:40

首先，爲了避免滾動內容，您必須設置max-width=100%，以便內容不會從其容器中移出。

現在爲了達到您的字體大小的好結果，您可以使用單位em而不是px。您可以輕鬆找到em-> px轉換器。還請閱讀這篇關於您的問題的優秀文章。

https://css-tricks.com/css-font-size/

來源

2016-02-03 08:34:38 Leonidas

設置字體大小的上限

回答

相關問題