我用Zurb Foundation 3网格创建了一个网站。每个页面都有一个大的h1:
身体{
字体大小:100%
}
/*报头*/
h1 {
字体大小:6.2 em;
粗细:500;
}
< div class = "行" >
<div class="十二列text-center">
<h1> LARGE HEADER TAGLINE </h1>
< / div >
<!——结尾口号——>
< / div >
<!——结束行——>
当我将浏览器调整为移动尺寸时,大字体不会调整,并导致浏览器包含水平滚动以适应大文本。
我注意到,在Zurb Foundation 3 Typography示例页面上,标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
文本大小可以用vw单位设置,这意味着“视口宽度”。这样,文本大小将跟随浏览器窗口的大小:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text
在我的个人项目中,我使用vw和@meida。它工作得很完美。
.mText {
font-size: 6vw;
}
@media only screen and (max-width: 1024px) {
.mText {
font-size: 10vw;
}
}
.sText {
font-size: 4vw;
}
@media only screen and (max-width: 1024px) {
.sText {
font-size: 7vw;
}
}