您的網(wǎng)站設(shè)計(jì)的真正響應(yīng)能力不僅僅是一個(gè)可擴(kuò)展到每個(gè)設(shè)備的框架，它還要求排版也調(diào)整到最佳可讀性。

響應(yīng)式排版將進(jìn)行調(diào)整，以便文本元素也改變網(wǎng)站上的大小和比例。雖然這是技術(shù)上的答案，但還有一種更好的設(shè)計(jì)方法同樣重要，因?yàn)閮H僅改變文本元素的大小并不總是足夠的。

讓我們深入了解響應(yīng)式排版最佳實(shí)踐、一些指南，以幫助您創(chuàng)建任何尺寸的出色字體。

響應(yīng)式排版入門

可靠的響應(yīng)式排版計(jì)劃將確保您的內(nèi)容跨設(shè)備可讀。它確保您已經(jīng)制定了一組交互、大小和比例規(guī)則，這將有助于跨設(shè)備呈現(xiàn)所有內(nèi)容。

好處是對(duì)于大多數(shù)網(wǎng)站來說，這幾乎可以歸結(jié)為兩種大小：桌面和移動(dòng)。（在過去幾年中，用于一般網(wǎng)頁瀏覽的平板電腦總體使用量急劇下降。）

現(xiàn)在挑戰(zhàn)來了。在寬屏幕上看起來很棒的字體和比例在垂直方向的手持屏幕尺寸上可能無法很好地呈現(xiàn)。這可以決定您的字體選擇以及您如何規(guī)劃網(wǎng)站。（否則，您可能需要在電腦和移動(dòng)設(shè)備之間切換字體，不建議這樣做。）

在您規(guī)劃設(shè)計(jì)時(shí)，將排版元素視為整個(gè)框架的一部分非常重要，這樣您以后就不會(huì)遇到奇怪的響應(yīng)式排版挑戰(zhàn)。（例如，超寬字體可能會(huì)在移動(dòng)屏幕上呈現(xiàn)獨(dú)特的可讀性挑戰(zhàn)。）

響應(yīng)式排版設(shè)計(jì)考慮因素包括：

排版選擇： 首先從一個(gè)看起來很棒并且在小屏幕上閱讀良好的字體開始。然后在更大的屏幕上進(jìn)行測(cè)試。

限制類型選項(xiàng)： 較小的調(diào)色板更易于管理，并且在加載時(shí)間方面重量更輕。

考慮一個(gè)備用方案以防萬一： 如果您想要的字體無法加載（可能設(shè)備不喜歡它或 CDN 服務(wù)器已關(guān)閉），請(qǐng)?jiān)试S使用非常常見的替代選擇。（Arial 是無襯線字體的流行后備選擇。）

基于內(nèi)容的設(shè)計(jì)大小和比例： 可讀的排版可以像字體選擇一樣依賴于其他內(nèi)容。文本元素的比例和大小通常會(huì)有所不同，具體取決于一次呈現(xiàn)多少文本以及屏幕上的內(nèi)容類型。

注意行高： 行之間的一點(diǎn)額外空間可以增強(qiáng)移動(dòng)設(shè)備的可讀性。太多和太少的空間之間存在微妙的平衡。對(duì)于較小的尺寸，150% 或 1.5em 的行高可能是一個(gè)不錯(cuò)的起點(diǎn)。

字體類別： 設(shè)計(jì)師已經(jīng)真正開放使用更多的字體變體——襯線、實(shí)驗(yàn)性等——作為一般做法。當(dāng)用戶可能更主要使用暗模式的小屏幕或屏幕上時(shí)，這些可能會(huì)帶來一些挑戰(zhàn)。如果您走這條路，請(qǐng)盡早測(cè)試類型選擇以確?？勺x性。

響應(yīng)式字體大小超越像素

為響應(yīng)式設(shè)計(jì)創(chuàng)建類型需要大量考慮大小和規(guī)模。每個(gè)設(shè)計(jì)師可能對(duì)他們想要使用的尺寸單位有不同的看法。

最受歡迎的尺寸單位包括：

像素： 數(shù)字字體大小的常用符號(hào)，表示絕對(duì)數(shù)字

磅： 更多是印刷品的結(jié)轉(zhuǎn)，用于確定在網(wǎng)上不太常見的尺寸

Ems： 相對(duì)于父字體大小的大小

Rems： 繼承根樣式的大小

百分比： 根據(jù)父樣式的百分比變化調(diào)整大小

大多數(shù)設(shè)計(jì)師避免使用絕對(duì)數(shù)字單位，而更喜歡百分比或 ems 和 rems。使用此模型，您可以從基本尺寸（例如正文）開始，然后從那里調(diào)整尺寸。

它可以使數(shù)學(xué)更容易（1rem大約為 10px），并且只需更改默認(rèn)字體大小即可進(jìn)行全面調(diào)整。

這看起來像默認(rèn)大小？

正文通常為 16px 到 18px 或 1.6rem 到 1.8 rem（移動(dòng)設(shè)備為 14px 到 16px）。然后你可以使用你喜歡的比例來相應(yīng)地調(diào)整所有內(nèi)容。

如果您為桌面和移動(dòng)設(shè)備調(diào)整正文文本或其他默認(rèn)字體大小，則比例將負(fù)責(zé)其余部分。

找到合適的比例

類型比例決定了在基本字體或默認(rèn)字體中的更大或更小字體。使用這種方法，如果您喜歡百分比或 1em（如果這是您的首選單位），則您的基本尺寸為 100%。

然后選擇比例以及該比例如何與從 H1 到 H6 的 CSS 位置相關(guān)，依此類推。

常見的排版比例可以創(chuàng)造出獨(dú)特的感覺和和諧，比隨機(jī)分配字體大小的值更容易用數(shù)學(xué)計(jì)算。

排版設(shè)計(jì)可以是任何網(wǎng)絡(luò)項(xiàng)目中最重要的元素。通過考慮文本將如何呈現(xiàn)以及它在各種尺寸下的閱讀方式，您正在為所有人創(chuàng)造更有價(jià)值和更易于訪問的網(wǎng)絡(luò)體驗(yàn)。

它首先要為排版打下堅(jiān)實(shí)的基礎(chǔ)，并了解如何為網(wǎng)站查看者進(jìn)行調(diào)整，無論他們?nèi)绾闻c設(shè)計(jì)進(jìn)行交互。