Bootstrap4 字体大小根据屏幕改变

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; }}

2. 最简单的办法

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

3. 其他方法

@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";