我想使用vw
指定我的字体大小,如
font-size: 3vw;
不过,我也想将字体大小限制为36px.我如何才能达到max-font-size
的等效值,因为max-font-size
并不存在--这是使用媒体查询的唯一 Select 吗?
我想使用vw
指定我的字体大小,如
font-size: 3vw;
不过,我也想将字体大小限制为36px.我如何才能达到max-font-size
的等效值,因为max-font-size
并不存在--这是使用媒体查询的唯一 Select 吗?
font-size: 3vw;
表示字体大小为视口宽度的3%.因此,当视口宽度为1200px时,字体大小将为3%*1200px=36px.
因此,可以使用单个媒体查询来覆盖默认的3vw字体大小值,从而轻松实现36px的max-font-size.
div {
font-size: 3vw;
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
<div>hello</div>
div {
font-size: min(3vw, 36px);
}
在上面的示例中,字体大小最多为36px,但如果视口的宽度小于1200px,则字体大小将减小到3vw(其中3vw计算为小于36px的值)
也就是说,以上述方式使用font-size
的视口单位是有问题的,因为当视口宽度小得多时(比如320px),渲染字体大小将变为0.03 x 320=9.6px,这非常(太)小.
为了克服这个问题,我可以推荐使用一种名为Fluid Type AKA CSS Locks的技术.
CSS锁是一种特定类型的CSS值计算,其中:
- 有一个最小值和一个最大值,
- 和两个断点(通常基于视口宽度),
- 在这些断点之间,实际值从最小值到最大值呈线性变化.
因此,假设我们希望应用上述技术,在600px或更小的视口宽度下,最小字体大小为16px,并且将线性增加,直到在1200px的视口宽度下达到最大32px.
这可以表示为以下内容(更多详细信息请参见this CSS-tricks article):
div {
font-size: 16px;
}
@media screen and (min-width: 600px) {
div {
font-size: calc(16px + 16 * ((100vw - 600px) / 600));
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 32px;
}
}
或者,我们可以使用this SASS mixin,它为我们做所有的数学运算,因此CSS看起来像这样:
/*
1) Set a min-font-size of 16px when viewport width < 600px
2) Set a max-font-size of 32px when viewport width > 1200px and
3) linearly increase the font-size from 16->32px
between a viewport width of 600px-> 1200px
*/
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller's Precise control over responsive typography
//
//
// `strip-unit()` function by Hugo Giraudel
//
// 11.08.2016 Remove redundant `&` self-reference
// 31.03.2016 Remove redundant parenthesis from output
// 02.10.2015 Add support for multiple properties
// 24.04.2015 Initial release
//
// =========================================================================
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
// Usage:
// ======
// /* Single property */
// html {
// @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }
// /* Multiple properties with same values */
// h1 {
// @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }
////////////////////////////////////////////////////////////////////////////
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
<div>Responsive Typography technique known as Fluid Type or CSS Locks.
Resize the browser window to see the effect.
</div>
div {
font-size: clamp(16px, 3vw, 32px);
}
请参见MDN:
CLAMP()允许您设置一个字体大小,该字体大小随 视口,但不低于最小字体大小或高于最大字体大小 字体大小.它与流畅排版中的代码具有相同的效果,但是 在一行中,并且不使用媒体查询.
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>
--
How Do You Do max-font-size in CSS?个