我在字体,填充和边距大小上使用vw
。我先设计手机。一切看起来都很好,直到大约700像素,此时字体开始看起来太大了。
我想确保字体不会大于指定值。是否可以设置最大字体大小?
这是我使用vw
的一些示例代码。但在700px
之后,它开始看起来太大而无法舒服地阅读。
#intro h1 {
font-weight: 700;
font-size: 8vw;
}
我唯一的想法是使用媒体查询并指定像素字体大小,但这似乎是错误的工作工具。我必须为使用vw
单位的所有元素创建媒体查询。
有什么建议吗?
答案 0 :(得分:2)
没有min-font-size或max-font-size这样的东西。
在这种情况下使用media queries
;
展开代码段以使用它。
#intro h1 {
font-weight: 700;
font-size: 8vw;
}
@media screen and (min-width: 700px) {
#intro h1 {
font-size: 3.5rem;
}
}
<div id="intro"><h1>Coucou</h1></div>