我的html中具有不同的元素,具有不同的文本大小。我想将它们设置为动态的,以便针对不同的屏幕尺寸显示不同的字体大小。
最好的方法是什么?现在,我正在这样做,但这会使代码看起来很丑陋:
<script>
$(window).resize(function(){
$('#first').css('font-size',($(window).width()*0.2)+'px');
$('h2').css('font-size',($(window).width()*0.02)+'px');
$('h1').css('font-size',($(window).width()*0.03)+'px');
对于两个要素,这还可以,但我还有很多。没有使用html / css / javascript的丰富经验,所以这就是我想出的。
由于我正在学习,所以我想知道什么是最好的方法。
也许您有一些改善建议?
您可以为此使用新的CSS单位vw,vh(视口宽度/高度)。
这是一篇有趣的CSS技巧文章,向您展示了如何使用它们进行排版。
示例:(来自以上文章)
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
因此,h1的字体大小为视口宽度的5.9%。等等。
话虽如此font-size
,以上述方式使用视口单元是有问题的,因为当视口宽度非常窄时-渲染的字体大小将变得太小,反之亦然。
为了克服这个问题,我建议您使用一种称为Fluid Type AKA CSS Locks的技术。
CSS锁是一种特定类型的CSS值计算,其中:
- 有一个最小值和一个最大值,
- 和两个断点(通常基于视口宽度),
- 在这些断点之间,实际值从最小值到最大值线性变化。
(摘自这篇关于CSS锁的文章,其中还详细解释了所涉及的数学。)
假设我们要应用上述技术,以使最小字体大小在600px或更小的视口宽度下为16px,并且将线性增加,直到在1200px的视口宽度达到最大32px为止。
我们可以使用这个SASS mixin为我们完成所有的数学运算,以便CSS看起来像这样:
div {
/* linearly increase the font-size from 16->32px
between a viewport width of 600px-> 1200px */
@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;
}
}
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller's Precise control over responsive typography
// http://madebymike.com.au/writing/precise-control-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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句