Bootstrap4——字體大小根據屏幕改變解決方案

官方文檔

https://v4.bootcss.com/docs/content/typography/#responsive-font-sizes

說明

「自適應字體尺寸」，下簡稱 RFS，這也是 Bootstrap GitHub 倉庫中的一個新項目。RFS 根據訪問者設備或瀏覽器窗口的尺寸自動計算合適的字體大小(font-size)。

下面是它的工作過程：

• 所有font-size屬性都已切換到@include font-size()mixin，而 Bootstrap 的 Stylelint 配置現在可以阻止使用font-size屬性。
• 默認情況下禁用該功能，但可以通過更改$enable-responsive-font-sizes布爾變量值來使用此項新功能。
• font-size完全可以通過 Sass 配置，但請先務必閱讀有關如何修改比例、變量等的文檔。

解決方案 

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.1rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.3rem;
  }
}

@import "bootstrap"; 

​

如果您從CDN加載Bootstrap，您將無法利用這些RFS規則。那麼如果您是直接引用的CSS文件可用下面的方式爲Bootstrap 4設置響應式字體： 

1. 媒體判斷屏幕

html { font-size: 1rem; }

@media (min-width: 576px) {
    html { font-size: 1.25rem; }
}
@media (min-width: 768px) {
    html { font-size: 1.5rem; }
}
@media (min-width: 992px) {
    html { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
    html { font-size: 2rem; }
}

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}

2. 最簡單的辦法

html { font-size: calc(1em + 1vw); }

 

 

參考文章

https://www.csdn.net/gather_2a/NtzaQg2sMDk1LWJsb2cO0O0O.html

https://www.oschina.net/news/104411/bootstrap-4-3-1-released

https://www.uedbox.com/post/55503/