響應字體大小

Question

嗨，我是 webdev 的新手，我想制作我的第一個完全響應式網頁，但我遇到了一個問題，即移動版本的文本特別大，所以我確實將寬度設置為 #vw，因為我雖然這樣可以解決它但它並沒有像我想要的那樣 go，因為文本變小了很多，無法閱讀 + 頁面看起來很難看，你們能幫幫我嗎？

``

 .#### { font-size: 2.5vw; font-weight: 700; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

`` 我希望它能使字體大小隨着寬度的變化而變化，但它確實比我想要的要小一點，現在移動版本的文本是不可讀的

Answer 1

聽起來您正在使用 vw（視口寬度）單位來設置文本的字體大小，這會導致文本隨着視口寬度變小而變小（例如在移動設備上）。 這個問題的一種解決方案是使用媒體查詢根據視口的寬度應用不同的 styles。

例如，當視口寬度低於特定閾值時，您可以使用媒體查詢將字體大小設置為更大/更小的值：

.#### {
  font-size: 2.5vw;
  font-weight: 700;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
  .#### {
    font-size: 2vw;
  }
}

當視口寬度為 600px 或更小時，這將導致字體大小減小到 2vw。 您可以調整寬度閾值和字體大小以找到最適合您的設計的值。

有關更多詳細信息，您可以 go https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

您可以使用媒體查詢。
媒體查詢是CSS3中引入的CSS技術。
它使用@media規則僅在特定條件為真時包含 CSS 屬性塊。

所以在這里你可以使用一個條件，如果設備是移動的，那么使用這些 css（即 css 用於較小的字體）

 #para { font-size: 40px; } // This CSS will run for mobile devices @media only screen and (max-width: 300px) { #para { font-size: 10px; } }

 <p id="para"> arches to delightful measures. Grim-visaged war hath smooth'd his wrinkled front; And now, instead of mounting barded steeds To fright the souls of fearful adversaries, He capers nimbly in a lady's chamber To the lascivious pleasing of a lute. But I, that am not shaped for sportive tricks, Nor made to court an amorous looking-glass; I, that am rudely stamp'd, and want love's majesty To strut before a wanton ambling nymph; I, that am rudely stamp'd, and want love's majesty To strut before a wanton ambling nymph; I, that am not shaped for sportive tricks, Nor made to court an amorous looking-glass; I, that am curtail'd of this fair proportion, of the ocean buried. Now are our brows bound with victorious wreaths; Our bruised arms hung up for monuments; Our stern alarums changed to merry meetings, Our dreadful marches to delightful measures. Grim-visaged war hath smooth'd his wrinkled front; And now, instead of mounting barded steeds To fright the souls of fearful adversarie </p>

您甚至可以為多個屏幕寬度添加斷點，比如device width >1000px使用字體20px ，然后從width 500到1000px使用字體15px ，然后width <500px使用字體10px ，等等，任何你可能喜歡的。

我還為您提供了一些我使用的斷點，您可以搜索更好的也許：

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }