我用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;
}
}
其他回答
在实际的原始Sass(不是scss)中，你可以使用下面的mixins来自动设置段落和所有标题的字体大小。
我喜欢它，因为它更紧凑。打字也更快。除此之外，它提供了相同的功能。无论如何，如果你仍然想坚持新的语法- scss，那么请随意将我的Sass内容转换为scss: [将sass转换为SCSS]
下面我给你四个Sass mixins。您必须根据需要调整它们的设置。
=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones
在你完成设置后，只需对一个mixin进行调用，即:+config-and-run-font-generator()。有关更多信息，请参阅下面的代码和注释。
我猜你可以像处理标题标签一样自动地为媒体查询做这件事，但我们都使用不同的媒体查询，所以它不适合每个人。我使用移动优先的设计方法，所以这就是我如何做到这一点。请随意复制并使用此代码。
复制并粘贴这些mixins到你的文件中:
=font-h1p-style-generator-manual()
body
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
font-size: 100%
line-height: 1.3em
%headers
line-height: 1em
font-weight: 700
p
line-height: 1.3em
font-weight: 300
@for $i from 1 through 6
h#{$i}
@extend %headers
=media-query-base-font-size-change-generator-manual()
body
font-size: 1.2em
@media screen and (min-width: 680px)
body
font-size: 1.4em
@media screen and (min-width: 1224px)
body
font-size: 1.6em
@media screen and (min-width: 1400px)
body
font-size: 1.8em
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
$h1-fs: $h1-fs // Set first header element to this size
$h1-step-down: $h1-step-down // Decrement each time by 0.3
$p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
$h1-fs: $h1-fs + $h1-step-down // Looping correction
@for $i from 1 through 6
h#{$i}
font-size: $h1-fs - ($h1-step-down * $i)
@if $i == $p-same-as-hx
p
font-size: $h1-fs - ($h1-step-down * $i)
// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
+font-h1p-style-generator-manual() // Just a place holder for our font style
+media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
+h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here
根据您的需要配置所有的mixin -玩它!:)然后在你实际的sass代码的顶部调用它:
+config-and-run-font-generator()
这会产生这样的输出。您可以自定义参数以生成不同的结果集。但是，因为我们都使用不同的媒体查询，有些mixin必须手动编辑(样式和媒体)。
生成CSS:
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.3em;
word-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
font-weight: 700; }
p {
line-height: 1.3em;
font-weight: 300; }
body {
font-size: 1.2em; }
@media screen and (min-width: 680px) {
body {
font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
body {
font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
body {
font-size: 1.8em; } }
h1 {
font-size: 2em; }
h2 {
font-size: 1.8em; }
h3 {
font-size: 1.6em; }
h4 {
font-size: 1.4em; }
h5 {
font-size: 1.2em; }
p {
font-size: 1.2em; }
h6 {
font-size: 1em;
}
使用CSS媒体说明符(这是他们[zurb]使用的)来进行响应式样式:
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
响应式字体大小还有另一种方法——使用rem单位。
html {
/* Base font size */
font-size: 16px;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
在稍后的媒体查询中，您可以通过更改基本字体大小来调整所有字体的大小:
@media screen and (max-width: 767px) {
html {
/* Reducing base font size will reduce all rem sizes */
font-size: 13px;
}
/* You can reduce font sizes manually as well */
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.0rem;
}
}
为了让这个在ie7和ie8中工作，你必须添加一个以px为单位的回退:
h1 {
font-size: 18px;
font-size: 1.125rem;
}
如果您正在使用Less进行开发，您可以创建一个mixin，它将为您进行数学计算。
Rem单元支持- http://caniuse.com/#feat=rem
我找到了这个解决方案，对我来说非常有效:
/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
用这个等式:
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
对于大于或小于1440和768的任何值，您可以给它一个静态值，或者应用相同的方法。
vw解决方案的缺点是你不能设置缩放比例，比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小，这是你的想法字体大小，但当你将窗口宽度缩小到768时，它可能最终是12px，而不是你想要的最小尺寸。
使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。
