CSS 字体大小相对于用户的屏幕分辨率？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11777598/
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
Font size relative to the user's screen resolution?
提问by barakuda28
I have a fluid website and the menu is 20% of its width. I want the font size of the menu to be measured properly so it always fits the width of the box and never wrap to the next line. I was thinking of using "em" as a unit but it is relative to the browser's font size, so when I change resolutions the font size stays the same.
我有一个流畅的网站，菜单是其宽度的 20%。我希望正确测量菜单的字体大小，以便它始终适合框的宽度并且永远不会换行到下一行。我正在考虑使用“em”作为一个单位，但它与浏览器的字体大小有关，因此当我更改分辨率时，字体大小保持不变。
Tried also pts and percentages. Nothing works as I need it...
还尝试了 pts 和百分比。没有任何工作，因为我需要它......
Give me a hint of how to proceed, please.
请给我一个如何继续的提示。
采纳答案by Arpit Srivastava
@media screen and (max-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
@media screen and (max-width : 1204px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
You can give it manually according to screen size of screen.Just have a look of different screen size and add manually the font size.
您可以根据屏幕的屏幕大小手动给它。只需看看不同的屏幕大小并手动添加字体大小。
回答by Miljan Puzovi?
You can use em, %, px. But in combination with media-queriesSee this Linkto learn about media-queries. Also, CSS3 have some new values for sizing things relative to the current viewport size: vw, vh, and vmin. See linkabout that.
您可以使用em, %, px。但是结合media-queriesSee this Link来了解媒体查询。此外，CSS3有一些新的值，相对于当前视口尺寸大小的东西：vw，vh，和vmin。请参阅相关链接。
回答by aWebDeveloper
There are several ways to achieve this
有几种方法可以实现这一目标
CSS3supports new dimensions that are relative to view port. But this doesn't work in android
CSS3支持与视口相关的新尺寸。但这在android中不起作用
- 3.2vw = 3.2% of width of viewport
- 3.2vh = 3.2% of height of viewport
- 3.2vmin = Smaller of 3.2vw or 3.2vh
3.2vmax = Bigger of 3.2vw or 3.2vh
body { font-size: 3.2vw; }
- 3.2vw = 视口宽度的 3.2%
- 3.2vh = 视口高度的 3.2%
- 3.2vmin = 3.2vw 或 3.2vh 中的较小者
3.2vmax = 3.2vw 或 3.2vh 中的较大者
body { font-size: 3.2vw; }
see css-tricks.com/....and also look at caniuse.com/....
参见css-tricks.com/....并查看caniuse.com/....
OLD Way
老路
Use media querybut requires font sizes for several breakpoints
body { font-size: 22px; } h1 { font-size:44px; } @media (min-width: 768) { body { font-size: 17px; } h1 { font-size:24px; } }Use dimensions in % or rem. Just change the base font size everything will change. Unlike previous one you could just change the body font and not h1 everytime or let base font size to default of the device and rest all in em.
“Root Ems”(rem): The “rem” is a scalable unit. 1rem is equal to the font-size of the body/html, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Root Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
使用媒体查询但需要几个断点的字体大小
body { font-size: 22px; } h1 { font-size:44px; } @media (min-width: 768) { body { font-size: 17px; } h1 { font-size:24px; } }使用% 或 rem 中的尺寸。只需更改基本字体大小，一切都会改变。与前一个不同，您可以每次只更改正文字体而不是 h1，或者让基本字体大小为设备的默认值，然后全部放在 em 中。
“Root Ems”(rem)：“rem”是一个可扩展的单位。1rem 等于 body/html 的 font-size，比如文档的 font-size 是 12pt，1em 就等于 12pt。Root Ems 本质上是可扩展的，所以 2em 等于 24pt，.5em 等于 6pt，等等。
百分比 (%)：百分比单位很像“em”单位，除了一些基本差异。首先，当前字体大小等于 100%（即 12pt = 100%）。在使用百分比单位时，您的文本对于移动设备和可访问性保持完全可扩展。
回答by Elad Ziv
I've developed a nice JS solution - which is suitable for entirely-responsive HTML (i.e. HTML built with percentages)
我开发了一个很好的 JS 解决方案 - 它适用于完全响应的 HTML（即用百分比构建的 HTML）
I use only "em" to define font-sizes.
html font size is set to 10 pixels:
html { font-size: 100%; font-size: 62.5%; }I call a font-resizing function on document-ready:
我只使用“em”来定义字体大小。
html 字体大小设置为 10 像素：
html { font-size: 100%; font-size: 62.5%; }我在文档就绪时调用字体调整函数：
// this requires JQuery
// 这需要 JQuery
function doResize() {
// FONT SIZE
var ww = $('body').width();
var maxW = [your design max-width here];
ww = Math.min(ww, maxW);
var fw = ww*(10/maxW);
var fpc = fw*100/16;
var fpc = Math.round(fpc*100)/100;
$('html').css('font-size',fpc+'%');
}
回答by CoderJK
You might try this tool: http://fittextjs.com/
你可以试试这个工具：http: //fittextjs.com/
I haven't used this second tool, but it seems similar: https://github.com/zachleat/BigText
我没有用过这第二个工具，但看起来很相似：https: //github.com/zachleat/BigText
回答by user3334188
Not sure why is this complicated. I would do this basic javascript
不知道为什么这很复杂。我会做这个基本的javascript
<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>
Where 12 means 12px at 1280 resolution. You decide the value you want here
其中 12 表示 1280 分辨率下的 12px。你在这里决定你想要的值
回答by Alex A
This worked for me :
这对我有用：
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum
viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
Explained in detail here: https://css-tricks.com/books/volume-i/scale-typography-screen-size/
在这里详细解释：https: //css-tricks.com/books/volume-i/scale-typography-screen-size/
回答by Domenico Monaco
I've created a variant of https://stackoverflow.com/a/17845473/189411
我创建了https://stackoverflow.com/a/17845473/189411的变体
where you can set min and max text size in relation of min and max size of box that you want "check" size. In addition you can check size of dom element different than box where you want apply text size.
您可以在其中设置与您想要“检查”大小的框的最小和最大大小相关的最小和最大文本大小。此外，您可以检查与要应用文本大小的框不同的 dom 元素的大小。
You resize text between 19px and 25px on #size-2 element, based on 500px and 960px width of #size-2 element
根据 #size-2 元素的 500 像素和 960 像素宽度，将 #size-2 元素上的文本大小调整为 19 像素和 25 像素之间
resizeTextInRange(500,960,19,25,'#size-2');
You resize text between 13px and 20px on #size-1 element, based on 500px and 960px width of body element
根据 body 元素的 500px 和 960px 宽度，将 #size-1 元素上的文本大小调整为 13px 到 20px
resizeTextInRange(500,960,13,20,'#size-1','body');
complete code are there https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src
function inRange (x,min,max) {
return Math.min(Math.max(x, min), max);
}
function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {
if(elementCheck==0){elementCheck=elementApply;}
var ww = $(elementCheck).width();
var difW = maxW-minW;
var difT = textMaxS- textMinS;
var rapW = (ww-minW);
var out=(difT/100)*(rapW/(difW/100))+textMinS;
var normalizedOut = inRange(out, textMinS, textMaxS);
$(elementApply).css('font-size',normalizedOut+'px');
console.log(normalizedOut);
}
$(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
$(window).resize(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
});
});
回答by Itai Noam
Notusing media queries is nice because it allows scaling the font size gradually.
不使用媒体查询很好，因为它允许逐渐缩放字体大小。
Using vwunits will adjust the font size relative to the view port size.
使用vw单位将相对于视口大小调整字体大小。
Directly converting vwunits to font size will make it difficult to hit to the sweet spot for both mobile resolutions and desktop.
直接将vw单位转换为字体大小将很难达到移动分辨率和桌面的最佳位置。
I recommend trying something like:
我建议尝试类似的东西：
body {
font-size: calc(0.5em + 1vw);
}
Credit: CSS In Depth
学分：深入 CSS
回答by pavan kumar
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
return (actualFontSize / maxScreenWidth) * window.innerWidth;
}
// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)
</script>
I hope this will help. I am using this formula for my Phase game.
我希望这将有所帮助。我在我的阶段游戏中使用这个公式。
