nro*_*fis 64 html5 font-size css3
我想为HTML页面中的每个元素设置最小字体大小.
例如,如果字体大小小于12px的元素,则它们将更改为12px.
但是如果有字体大小的元素然后是12px,它们就不会改变.
有没有办法用CSS做到这一点？
Mar*_*uef 166
在CSS3中,有一个简单而精彩的黑客:
font-size:calc(12px + 1.5vw);
这是因为calc()的静态部分定义了最小值.即使动态部分可能缩小到接近0的位置.
Ste*_*ger 32
这可能不是您想要的,但在CSS 3中,您可以使用max-function.
例:
blockquote {
font-size: max(1em, 12px);
}
这样,font-size将是1em(如果1em> 12px),但至少为12px.
不幸的是,这个令人敬畏的CSS3功能尚未被任何浏览器支持,但我希望这很快就会改变!
使用媒体查询.示例:这是我使用原始大小是1.0vw,但当它达到1000时,字母变得太小,所以我扩大它
@media(max-width:600px){
body,input,textarea{
font-size:2.0vw !important;
}
}
我正在处理的这个网站没有响应> 500px,但你可能需要更多.这个解决方案的优点是,你可以保持字体大小缩放,而不需要超级迷你字母,你可以保持js免费.
.class {
font-size: clamp(minimum-size, prefered-size, maximum-size)
}
使用这个，你可以将其设置为首选，最大值为 5vw，但最小值为 15px 或其他值，因此它不会超过 5vw，但如果 5vw < 15px，它将坚持 15px
看起来我有点晚了,但对于有这个问题的其他人来说,试试这个代码吧
p { font-size: 3vmax; }
使用您喜欢的任何标签和您喜欢的尺寸(替换3)
p { font-size: 3vmin; }
用于最大尺寸.
CSS 有一个clamp() 函数，用于保存上下限之间的值。使用clamp() 函数可以在定义的最小值和最大值之间的值范围内选择中间值。
它只需要三个维度：
尝试使用下面的代码，并检查窗口大小调整，这将更改您在控制台中看到的字体大小。我设置了最大值150px和最小值100px。
$(window).resize(function(){
console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));h1{
font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
font-size: clamp(100px, 10vw, 150px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<h1 id="element">THIS IS TEXT</h1>
</center>body不会。虽然您可以使用该属性设置基本字体大小font-size，但之后指定较小尺寸的任何内容都将覆盖该元素的基本规则。为了完成您想做的事情，您需要使用 Javascript。
您可以迭代页面上的元素并使用如下所示更改较小的字体：
$("*").each( function () {
var $this = $(this);
if (parseInt($this.css("fontSize")) < 12) {
$this.css({ "font-size": "12px" });
}
});
这是一个小提琴，您可以在其中看到它的完成情况：http://jsfiddle.net/mifi79/LfdL8/2/