jQuery 根据屏幕大小调整文本大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19223916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize text acording to screen size
提问by Karlis
I have different elements in my html with different text sizes. I want to set them to be dynamic so that it would show different font sizes for different screen sizes.
我的 html 中有不同文本大小的不同元素。我想将它们设置为动态的，以便为不同的屏幕尺寸显示不同的字体大小。
What would be the best way? Now I am doing it like this but it makes the code look ugly:
最好的方法是什么？现在我正在这样做，但它使代码看起来很难看：
<script>
$(window).resize(function(){
$('#first').css('font-size',($(window).width()*0.2)+'px');
$('h2').css('font-size',($(window).width()*0.02)+'px');
$('h1').css('font-size',($(window).width()*0.03)+'px');
For two elements it would be ok, but I have many more. Don't have big experience with html/css/javascript so this was what I came up with.
对于两个元素就可以了，但我还有更多。对 html/css/javascript 没有丰富的经验，所以这就是我想出的。
Since I am learning I want to know what would be the best way.
因为我正在学习，所以我想知道什么是最好的方法。
Maybe you have some suggestions how to improve that?
也许你有一些建议如何改进？
回答by Danield
You could use the new css units vw,vh (viewport width/height) for this.
您可以为此使用新的 css 单位 vw,vh（视口宽度/高度）。
Here's an interesting css-tricks articlewhich shows you how to use them for typography.
这是一篇有趣的css-tricks 文章，向您展示了如何使用它们进行排版。
Example: (from above article)
示例：（来自上述文章）
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
So h1 will have font-size 5.9% of the viewport width. etc.
所以 h1 的字体大小将是视口宽度的 5.9%。等等。
That being said, using viewport units for font-sizein the above way is problematic because when the viewport width is very narrow - then the rendered font size will become too small and vice-versa.
话虽如此font-size，以上述方式使用视口单位是有问题的，因为当视口宽度非常窄时，渲染的字体大小将变得太小，反之亦然。
In order to overcome this problem, I can recommend using a technique called Fluid TypeAKA CSS Locks.
为了克服这个问题，我可以推荐使用一种称为Fluid TypeAKA CSS Locks 的技术。
A CSS lock is a specific kind of CSS value calculation where:
- there is a minimum value and a maximum value,
- and two breakpoints (usually based on the viewport width),
- and between those breakpoints, the actual value goes linearly from the minimum to the maximum.
CSS 锁是一种特定类型的 CSS 值计算，其中：
- 有一个最小值和一个最大值，
- 和两个断点（通常基于视口宽度），
- 在这些断点之间，实际值从最小值到最大值呈线性变化。
(From this article on CSS lockswhich also explains the math involved in great detail.)
（来自这篇关于 CSS 锁的文章，它也非常详细地解释了所涉及的数学。）
So let's say we want to apply the above technique such that the minimum font-size is 16px at a viewport width of 600px or less, and will increase linearly until it reaches a maximum of 32px at a viewport width of 1200px.
因此，假设我们要应用上述技术，以便在视口宽度为 600 像素或更小的情况下最小字体大小为 16 像素，并且将线性增加，直到在视口宽度为 1200 像素时达到最大 32 像素。
We could use this SASS mixinwhich does all of the math for us so that the CSS would look something like this:
我们可以使用这个 SASS mixin，它为我们做所有的数学运算，这样 CSS 看起来像这样：
div {
/* linearly increase the font-size from 16->32px
between a viewport width of 600px-> 1200px */
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller's Precise control over responsive typography
// http://madebymike.com.au/writing/precise-control-responsive-typography/
//
// `strip-unit()` function by Hugo Giraudel
//
// 11.08.2016 Remove redundant `&` self-reference
// 31.03.2016 Remove redundant parenthesis from output
// 02.10.2015 Add support for multiple properties
// 24.04.2015 Initial release
//
// =========================================================================
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
// Usage:
// ======
// /* Single property */
// html {
// @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }
// /* Multiple properties with same values */
// h1 {
// @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }
////////////////////////////////////////////////////////////////////////////
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}<div>Responsive Typography technique known as Fluid Type or CSS Locks.
Resize the browser window to see the effect.
</div>Codepen Demo
代码笔演示
Further Reading
进一步阅读
Precise control over responsive typography
Fluid Responsive Typography With CSS Poly Fluid Sizing
具有 CSS Poly Fluid Sizing 的 Fluid Responsibility Typography
回答by Shakti Patel
use media for set font size in css file
使用媒体在 css 文件中设置字体大小
@media(max-width:767px) {
body {
font-size: 10px;
};
}
@media(min-width:768px) {
body {
font-size: 11px;
};
}
@media(min-width:992px) {
body {
font-size: 12px;
};
}
@media(min-width:1200px) {
body {
font-size: 13px;
};
}
回答by Abhidev
ditch javascript to change the font-sizes...specify font-size in em in your css files like this.
放弃 javascript 以更改字体大小...在 em 中像这样在 css 文件中指定字体大小。
div{
font-size:2em;
}
回答by Mr. Polywhirl
Instead of using pixels, use embecause it will scale accordingly.
不要使用像素，而是使用，em因为它会相应地缩放。
From Wikipedia:
来自维基百科：
Online, the use of the em measurement has become more common; with the development of Cascading Style Sheets (or CSS), the W3C best practices recommendations within HTML and online markup now call for web pages to be based on scalable designs, using a relative unit of measurement (such as the em measurement), rather than a fixed one such as pixels ("px") or points.
在网上，使用 em 测量变得更加普遍；随着级联样式表（或 CSS）的发展，HTML 和在线标记中的 W3C 最佳实践建议现在要求网页基于可扩展设计，使用相对度量单位（例如 em 度量），而不是一个固定的，例如像素（“px”）或点。
回答by Vikram Tiwari
Do not use javascript to specify font sizes. CSS has built in methods for that.
不要使用 javascript 来指定字体大小。CSS为此内置了方法。
You can use 'em' or '%' with the font size to change the size of font related to your page and devices dimensions.
您可以使用带有字体大小的 'em' 或 '%' 来更改与您的页面和设备尺寸相关的字体大小。
Code Example:
代码示例：
font-size: 3em;
font-size: 10%;
Both shall do.
两者都要做。
回答by Ace Trajkov
Try this, if it helps (if you are intent on using javascript) http://fittextjs.com/
试试这个，如果它有帮助（如果你打算使用 javascript） http://fittextjs.com/
回答by Bhojendra Rauniyar
Browser will set its font sizes accordingly if you set in %or embasis.
如果您在%或em基础上设置，浏览器将相应地设置其字体大小。
回答by Arun Aravind
You could do this with css media query.
你可以用 css 媒体查询来做到这一点。
Inside the media query set body size in percentage.
在媒体查询中以百分比设置正文大小。
eg: css
例如：CSS
@media screen and (max-width: 1024px) {
body {
font-size: 90%;
}
}
@media screen and (max-width: 1440px) {
body {
font-size: 100%;
}
}
Then set font-sizes on each and every elements you want to resize font while resizing browser or according to resolution in percentage.
然后在调整浏览器大小时或根据分辨率百分比设置要调整字体大小的每个元素的字体大小。
eg: if you want to resize fonts on h1
例如：如果你想在 h1 上调整字体大小
h1 {
font-size: 150%;
}
it will work as you want it to.
它会按照您的意愿工作。
回答by Rahul Arora
Sizing-resizing of fonts using JavaScript is not a good practice. Better do it traditionally using CSS. You can size your fonts in CSS with different units like px, em and % and rem (root em).
使用 JavaScript 调整字体大小不是一个好习惯。传统上最好使用 CSS 来完成。您可以在 CSS 中使用不同的单位来调整字体大小，例如 px、em 和 % 以及 rem（根 em）。
In order to get your fonts sized according to the screen size, set the font-sizes in rem. Or make use of media queries to set font-sizes for different screen resolutions. Here are some sample media queries to do so:
为了根据屏幕大小调整字体大小，请在 rem 中设置字体大小。或者利用媒体查询为不同的屏幕分辨率设置字体大小。以下是一些示例媒体查询：
@media screen and (max-width: 1024px) {
#first { font-size: 204px; }
h2 { font-size: 20px; }
h1 { font-size: 30px; }
}
