我用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示例页面上,标题在压缩和展开时适应浏览器。
我是不是忽略了一些很明显的东西?我该如何做到这一点?
这部分在foundation 5中实现。
在文件_type中。SCSS有两组头变量:
// We use these to control header font sizes
// for medium screens and above
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;
对于medium up,它们根据第一组变量生成大小:
@media #{$medium-up} {
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}
对于default-i。在小屏幕上,他们使用第二组变量来生成CSS:
h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }
您可以使用这些变量并在自定义scss文件中重写,为各自的屏幕大小设置字体大小。
响应式字体大小也可以用这个称为FlowType的JavaScript代码完成:
http://simplefocus.com/flowtype/
https://github.com/simplefocus/FlowType.JS
FlowType -响应式网页排版在其最好的:字体大小基于元素宽度。
或者这个叫做FitText的JavaScript代码:
http://fittextjs.com/
https://github.com/davatron5000/FitText.js
FitText -使字体大小灵活。在响应式设计中使用这个插件,根据比例调整标题的大小。
解决文本在台式机和移动/平板电脑上都好看的问题的一种方法是将文本大小固定为物理单位,如物理厘米或英寸,这与屏幕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>
在我的例子中,我只使用了视口的方向,但是这个原则应该适用于任何媒体查询。