輔助功能 文字大小
為什麼
有些人需要更大的文字才能看清字母。
什麼
使用者必須能夠在不縮放整個介面的情況下更改文字大小。
這可以透過作業系統或瀏覽器的設定來完成。有很多方法可以做到這一點。在桌面版的 Chrome 瀏覽器中，您可以在“外觀”和“自定義字型”下的設定中設定字型大小。
如何操作
讓我們在桌面或筆記型電腦的 Chrome 瀏覽器中開啟 LG 印度 網站。
這是預設瀏覽器設定下“最受歡迎”部分的樣子。
瀏覽器設定
現在，在您的 Chrome 瀏覽器中，將字型大小設定為 40 畫素。這是預設大小的 2.5 倍。對於視力低下使用者來說，這並不算多。
.model-name {
font-size: 18px;
line-height: 22px;
height: 66px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
相對單位
為了解決這個問題，讓我們嘗試使用 rem 而不是 px。18 px 是 1.125 rem，如果基礎大小是 16 px。
.model-name {
font-size: 1.125rem;
line-height: 22px;
height: 66px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
這有幾個原因。首先，line-height 是以畫素為單位設定的。就像字型大小一樣，我們在設定 行高時應該避免使用絕對單位。line-height 可以用一個不帶單位的數字來設定，而不是一個長度。在這種情況下，我們可以使用 line-height: 1.2; 而不是 line-height: 22px;
產品標題的容器具有 height: 66px; – 當您想支援文字縮放時，這不是一個好主意。讓我們嘗試移除那個絕對高度。
最後一個問題是，這個產品標題有 -webkit-line-clamp: 3; 限制文字顯示為三行。重要資訊丟失了。
.model-name {
font-size: 1.125rem;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
結果
終於，有了又大又易讀的文字。
本課程將不涵蓋支援文字大小調整的所有技術。主要收穫是您應該測試您編寫的網站，並**努力使用相對單位**。
