CSS 更改文本大小

在网页中，文本大小对于页面的可读性和美观度非常重要。CSS 提供了多种方式来更改文本大小，无论是对整个文档还是局部文本进行更改。

1. 使用 font-size 属性设置文本大小

用于设置文本大小的 CSS 属性是 font-size，可以将其应用于元素的样式中。可以设置具体的像素值、相对的百分比或 em 值。

p {
  font-size: 16px; /*设置段落文本大小为 16px */
}

h1 {
  font-size: 2em; /*设置 H1 标题文本大小为正常大小的两倍 */
}

span {
  font-size: 120%; /*设置 span 元素内的文本大小为其父元素的 120% */
}

2. 使用 rem 值设置相对文本大小

相对长度单位 rem（root em）是相对于根元素（即 html 元素）的字体大小来计算的。这意味着可以在整个文档中的元素上设置相对的字体大小，这样可以确保文档的可扩展性和可维护性。

html {
  font-size: 16px; /*将根元素的字体大小设置为 16px */
}

h2 {
  font-size: 2rem; /*设置 H2 标题文本大小为正常大小的两倍 */
}

p {
  font-size: 0.875rem; /*设置段落文本大小为根元素大小的 0.875（也就是 14px） */
}

3. 使用 @media 查询设置响应式文本大小

随着移动设备的普及，制作响应式网站变得越来越重要。CSS 的 @media 查询可以根据屏幕宽度或高度的不同，对文本大小进行不同的设置。

/*设置计算机屏幕上的文本大小*/
@media screen and (min-width: 769px) {
  body {
    font-size: 18px;
  }
}

/*设置移动设备屏幕上的文本大小*/
@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

4. 使用文本大小关键字设置文本大小

除了具体的像素值或 em/rem 值外，CSS 还提供了一些关键字（如 large、small 等）来设置文本大小，可以根据需要进行选择。

h3 {
  font-size: large; /*设置 H3 的文本大小为 "large" */
}

p {
  font-size: x-small; /*设置段落文本大小为 "x-small" */
}

总之，通过使用上述方式，可以轻松地更改文本大小，从而实现更好的页面布局和可读性。