Bootstrap4 |
您所在的位置：网站首页 › css样式中字体大小建议font › Bootstrap4 |
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/ |
【本文地址】
今日新闻 |
推荐新闻 |