如何使用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中文网其他相关文章！