Html 调整浏览器大小时如何使字体变小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20304472/
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
How to make the font size smaller when I resize the browser
提问by user2804038
I am making a website with html5 and css. I am trying to make this website responsive, but I don't know why the size of the font stay the same when I resize the browser window, even when I'm using emor percentages such as: font-size: XXemor font-size: XX%.
我正在用 html5 和 css 制作一个网站。我正在尝试使该网站具有响应性，但是我不知道为什么在调整浏览器窗口大小时字体的大小保持不变，即使我正在使用em或percentages ，例如:font-size: XXem或font-size: XX%.
How can I make font resizable?
如何使字体可调整大小？
回答by Victor3y
For HTML5 web pages I would highly suggest using Viewpoint Width/Height values. They function similarly to % but are font sizes that resize with the window.
对于 HTML5 网页，我强烈建议使用视点宽度/高度值。它们的功能与 % 类似，但字体大小会随窗口大小调整。
For example...
例如...
.some-paragraph{
font-size: 5vw;
}
This would set the font-size to always be 5% of the current viewport width, even on re-sizing!
这会将字体大小设置为始终为当前视口宽度的 5%，即使在重新调整大小时！
Learn more here: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
在此处了解更多信息：http: //www.w3.org/TR/css3-values/#viewport-relative-lengths
Note: You may need to have this in your head:
注意：您可能需要记住以下内容：
<meta name="viewport" content="initial-scale=1">
回答by San
It's called Responsive
这叫做响应式
@media screen and (max-width: 1024px) {
your font style goes here
}
@media screen and (max-width: 950px) {
your font style goes here
}
@media screen and (max-width: 650px) {
your font style goes here
}
@media screen and (max-width: 480px) {
your font style goes here
}
回答by fauverism
Check your media queries, they should be controlling your font size, if you're using responsive techniques.
检查您的媒体查询，如果您使用响应式技术，它们应该控制您的字体大小。
A code sample would help.
代码示例会有所帮助。
Give rem a shot. Works better than % or em.
给雷姆一个机会。比 % 或 em 效果更好。
回答by Space Age Crystal
You should definitely use CSS media queriesto style based on a range of screen ratios and specifications, but here's an example using both rem units and jQuery to make the font smaller when you resize the browser width. Fiddle here.
您绝对应该使用CSS 媒体查询根据一系列屏幕比例和规范设置样式，但这里有一个示例，使用 rem 单位和 jQuery 在您调整浏览器宽度时使字体变小。在这里摆弄。
CSS
CSS
html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }
JavaScript/jQuery
JavaScript/jQuery
$(document).ready(function () {
var holdWidth = $(window).width();
$(window).on('resize', function () {
newPercentage = (($(window).width() / holdWidth) * 100) + "%";
$("html").css("font-size", newPercentage)
});
});
and here's an exampleaveraging both the width and height for the new font size percentage:
而这里有一个例子平均无论是宽度和高度为新字体大小的百分比：
$(document).ready(function () {
var holdWidth = $(window).width();
var holdHeight = $(window).height();
var holdAverageSize = (holdWidth + holdHeight) / 2;
$(window).on('resize', function () {
newAverageSize = ($(window).width() + $(window).height()) / 2;
newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
$("html").css("font-size", newPercentage)
console.log(newPercentage);
});
});
回答by Reynderke
you can fix this by using @media query's and a viewport in your css , and add this meta tag to your html:
您可以通过在 css 中使用 @media 查询和视口来解决此问题，并将此元标记添加到您的 html：
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the @media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
并通过@media 查询和视口，您可以在 css 中使用此媒体查询 + 视口声明每个屏幕宽度的大小：
@media screen and (min-width: 820px) and (max-width: 920px) {
@viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, @media screen and (min-width: 1200px){ @viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
我主要使用值的：从 20 - 600 、 600-700 、 700-820 、 820 - 920 、 920 - 1200、@media screen 和 (min-width: 1200px){ @viewport { width: 1200px; }（最后一个将设置宽度大于 1200 像素的任何屏幕的大小，因此您的最大版本的代码在这里}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
所以这意味着你将有 6 倍的 css 代码适应大小。
This is called adaptive or responsive design and is pretty easy to do
这称为自适应或响应式设计，很容易做到
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
有关更多信息，您可以查看此http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
回答by Karuhanga
This might help. Responsively adjusts the text size, according to the window size, but keeps it just large enough for mobile compatibility http://typecast.com/blog/a-more-modern-scale-for-web-typography
这可能会有所帮助。根据窗口大小响应性地调整文本大小，但保持足够大以适应移动设备 http://typecast.com/blog/a-more-modern-scale-for-web-typography
回答by Karuhanga
.text {
font-size: 50px;
}
@media only screen
and (min-width : 300px)
and (max-width : 500px) {
.text {
font-size: 20px;
}
}
@media only screen
and (min-width : 500px)
and (max-width : 800px) {
.text {
font-size: 30px;
}
}
</style>
<div class="text">Test Text</div>
回答by user4565320
font-size: 25vmin;
字体大小：25vmin；
This was very good resizing font in both height and width.
You dont need anything in the head.
这是非常好的调整字体高度和宽度的方法。
你不需要头脑中的任何东西。
回答by steve
How are you specifying your baseline font-size (against your html or body tags in your CSS file)? If you're setting this value to a pixel (or other fixed measure) or inheriting a browser default font size your percentage or em values will always be a percentage of these defaults.
您如何指定基线字体大小（针对 CSS 文件中的 html 或 body 标签）？如果您将此值设置为像素（或其他固定度量）或继承浏览器默认字体大小，您的百分比或 em 值将始终是这些默认值的百分比。
The most common approach to building responsive sites is to do a 'mobile first' approach whereby your default style sheet handles the base styling for your site on a small screen, then use media queries in CSS to tweak the styles as screen size increases. Are you using any media queries/breakpoints currently?
构建响应式网站最常见的方法是采用“移动优先”方法，即您的默认样式表在小屏幕上处理您网站的基本样式，然后使用 CSS 中的媒体查询随着屏幕尺寸的增加来调整样式。您目前是否在使用任何媒体查询/断点？
