我用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示例页面上,标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
这里clamp有三个参数。
第一个是允许的最小字体大小。
第三个是允许的最大字体大小。
第二个参数是您希望始终具有的font-size。它的单位必须是相对的(vw, vh, ch),而不是绝对的(i。E不是px mm pt)相对单元将使它改变其大小W.R.T变化的屏幕尺寸。
举个例子:
假设有一个很大的fontawesome图标,您想动态调整它的大小(响应式图标)
fa-random-icon{
font-size: clamp( 15rem, 80vw, 80vh)
}
这里80vw是首选的字体大小。
15雷姆是最小字体大小(下界)。
80vh是最大字体大小(上限)。
i.e.
如果在特定的移动屏幕尺寸中,如果80vw < 15rem,则字体大小为15rem。
如果屏幕太宽,那么如果80vw > 80vh,那么字体大小是80vh。
人们提出的上述方法往往效果不确定。就像我们只使用vw时,字体大小有时可能太大或太小(无界)。
@media查询可以使用,但你必须使用至少3个媒体查询,使字体大小响应
在调整浏览器窗口大小时,字体大小不会像这样响应。相反,它们会对浏览器的缩放/类型大小设置做出响应,比如在浏览器中同时按下键盘上的Ctrl和+。
媒体查询
你必须考虑使用媒体查询来减少字体大小在特定的时间间隔,它开始破坏你的设计和创建滚动条。
例如,试着在你的CSS底部添加这个,在你的设计开始中断的地方改变320像素的宽度:
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
视口百分比长度
你也可以使用视口百分比长度,如vw, vh, vmin和vmax。官方W3C文档声明:
viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时,它们将相应地缩放。
同样,从同一W3C文档中,每个单独的单元可以定义如下:
vw单位-等于初始包含块宽度的1%。
vh单位-等于初始包含块高度的1%。
vmin单位-等于vw或vh中较小者。
vmax单位-等于vw或vh中较大的一个。
它们的使用方式与其他CSS值完全相同:
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
从这里可以看出,兼容性相对较好。但是,某些版本的ie浏览器和Edge浏览器不支持vmax。此外,iOS 6和7的vh单位也有问题,这在iOS 8中得到了修复。
解决文本在台式机和移动/平板电脑上都好看的问题的一种方法是将文本大小固定为物理单位,如物理厘米或英寸,这与屏幕PPI(每英寸点数)无关。
基于这个答案,下面是我在HTML文档末尾使用的响应式字体大小的代码:
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
function setFontSizeForClass(className, fontSize) {
var elms = document.getElementsByClassName(className);
for(var i=0; i<elms.length; i++) {
elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
}
}
setFontSizeForClass('h1-font-size', 30);
setFontSizeForClass('action-font-size', 20);
setFontSizeForClass('guideline-font-size', 25);
// etc for your different classes
</script>
在上面的代码中,不同类别的项目以物理单位分配字体大小,只要浏览器/OS为其屏幕的PPI正确配置。
物理单位字体总是不太大也不太小,只要到屏幕的距离是正常的(阅读书籍的距离)。
我刚刚提出了一个想法,每个元素只需定义一次字体大小,但它仍然受到媒体查询的影响。
首先,我设置变量“——text-scale-unit”为“1vh”或“1vw”,这取决于使用媒体查询的视口。
然后我使用calc()变量和我的字体大小乘数:
/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
:root{
--text-scale-unit: 1vh;
}
}
@media (orientation: portrait) {
:root {
--text-scale-unit: 1vw;
}
}
/* Use a variable with calc and multiplication. */
.large {
font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
font-size: calc(var(--text-scale-unit) * 10);
}
.small {
font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
Responsive
</span>
<span class="large">
text
</span>
<span class="small">
with one
</span>
<span class="extra-small">
font-size tag.
</span>
在我的例子中,我只使用了视口的方向,但是这个原则应该适用于任何媒体查询。