如何使用Bootstrap構建響應型類型秤

>該教程深入研究Bootstrap的版式處理，並演示瞭如何修改其SCSS以創建響應式類型的規模。 這樣可以確保所有屏幕尺寸的可讀性，從而阻止較小設備上的超大標題。

密鑰概念：

• 自定義： Bootstrap的版式可以通過直接編輯其SCSS源文件來自定義。 >元素使用>和html來防止移動瀏覽器自動縮放字體尺寸。 -webkit-text-size-adjust: 100%;>-ms-text-size-adjust: 100%;響應類型量表：
創建響應類型量表涉及定義類型刻度映射，驗證功能和Mixins根據屏幕尺寸動態調整字體大小。這保持了一致的視覺層次結構。
• >>默認設置：
引導程序默認值為16px基本字體大小，1.5行高和 font family。 這些可以使用自定義的Sass變量文件覆蓋。
• > 可讀性和層次結構：'system-ui'響應類型量表可顯著提高可讀性，並建立清晰的視覺層次結構，從而增強用戶體驗。 這是在引導程序中使用SASS地圖，驗證功能和尺寸調整的Mixins來實現的。
• Bootstrap的默認版式：

>

了解Bootstrap的排版需要檢查其SCSS源。 （注意：為了清楚起見，省略了非類型樣式。）

元素：

元素的樣式（在html中）主要致力於防止不必要的移動瀏覽器字體縮放：

html _reboot.scss元素：

在

<code class="language-scss">html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}</code>

body， -

> -

- body - _reboot.scss elements：

<code class="language-scss">body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left;
}</code>

這些元素的樣式（在p和h1中）利用變量來定義字體尺寸，創建一個基本的類型刻度，該標度固定在所有屏幕尺寸上。 這些變量可以在自定義的sass文件中覆蓋。 h6> .display-1.display-4創建一個響應類型的比例：

>

為了創建一個真正響應的類型刻度，我們將使用SASS根據屏幕尺寸動態生成字體大小。此方法使用：_type.scss

1. 類型刻度映射：定義了各種類型的比例（例如，基於黃金比率）。
2. 驗證功能：確保所選刻度有效。 > >
> Mixins：
3. 生成標題和顯示類的字體尺寸。
SASS代碼將包括類型尺度的地圖，驗證比例值的函數以及為標題生成字體大小的函數（

> -

）和顯示類（h1> - h6） 。 這些混合蛋白將在不同的引導斷點上調用，以響應地調整字體大小。 也可以使用介質查詢來調整根字體大小（.display-1），以在不同的屏幕尺寸上創建更流暢的類型比例。 .display-4>html示例（說明性 - 需要完整的SASS實現）：

>

結論：

通過利用SASS及其功能，您可以在Bootstrap項目中創建動態和適應性的類型刻度，從而確保最佳的可讀性和所有設備的一致視覺層次結構。 提供的Codepen示例（原始文本中包含的鏈接）在作用中演示了此響應類型的比例。 請記住調整比例值和斷點以符合您的特定設計要求。

<code class="language-scss">html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}</code>

以上是如何使用Bootstrap構建響應型類型秤的詳細內容。更多資訊請關注PHP中文網其他相關文章！