我有一个流畅的网站，菜单是其宽度的 20%。我希望正确测量菜单的字体大小，使其始终适合框的宽度，并且永远不会换行到下一行。我正在考虑使用“em”作为一个单位，但它与浏览器的字体大小相关，所以当我更改分辨率时，字体大小保持不变。
还尝试了点和百分比。没有什么可以满足我的需要...
请给我一个提示如何进行。
问问题
217697 次
11 回答
55
新方法
有几种方法可以实现这一点。
*CSS 支持相对于视口的尺寸。
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; }
查看css-tricks.com/....并查看caniuse.com/....
老路
使用媒体查询，但需要多个断点的字体大小
body { font-size: 22px; } h1 { font-size:44px; } @media (min-width: 768px) { body { font-size: 17px; } h1 { font-size:24px; } }使用% 或 rem中的尺寸。只需更改基本字体大小，一切都会改变。与以前的不同，您可以只更改正文字体而不是每次都更改 h1，或者将基本字体大小设置为设备的默认值，然后全部放在 em 中。
“根 Ems”(rem)：“rem”是一个可扩展的单元。1rem 等于 body/html 的 font-size，例如，如果文档的 font-size 为 12pt，则 1em 等于 12pt。根 Ems 本质上是可扩展的，所以 2em 等于 24pt，.5em 等于 6pt，等等。
百分比 (%)：百分比单位很像“em”单位，除了一些基本差异。首先，当前字体大小等于 100%（即 12pt = 100%）。使用百分比单位时，您的文本仍可完全适应移动设备和可访问性。
于 2014-02-24T07:41:08.603 回答
54
@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;
}
}
您可以根据屏幕的屏幕尺寸手动给它。只需查看不同的屏幕尺寸并手动添加字体大小。
于 2012-08-02T12:48:28.957 回答
19
我开发了一个不错的 JS 解决方案——它适用于完全响应的 HTML（即用百分比构建的 HTML）
我只使用“em”来定义字体大小。
html 字体大小设置为 10 像素：
html { font-size: 100%; font-size: 62.5%; }我在准备好文档时调用了字体大小调整功能：
// 这需要 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+'%');
}
于 2013-07-24T21:54:57.183 回答
7
不知道为什么这很复杂。我会做这个基本的javascript
<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>
其中 12 表示 12px 分辨率为 1280。你在这里决定你想要的价值
于 2015-05-27T07:40:11.347 回答
5
你可以试试这个工具： http: //fittextjs.com/
我没有使用过第二个工具，但看起来很相似：https ://github.com/zachleat/BigText
于 2012-08-02T12:43:00.090 回答
4
这对我有用：
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum
viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
这里详细解释： https ://css-tricks.com/books/volume-i/scale-typography-screen-size/
于 2019-03-14T11:40:24.697 回答
3
不使用媒体查询很好，因为它允许逐渐缩放字体大小。
使用vw单位将调整相对于视口大小的字体大小。
将单位直接转换vw为字体大小将很难达到移动分辨率和桌面分辨率的最佳位置。
我建议尝试类似的东西：
body {
font-size: calc(.5em + 1vw);
}Almost before we knew it, we had left the ground.学分：深入的 CSS
于 2019-12-05T16:14:27.463 回答
2
我创建了https://stackoverflow.com/a/17845473/189411的变体
您可以在其中设置与要“检查”大小的框的最小和最大大小相关的最小和最大文本大小。此外，您可以检查与要应用文本大小的框不同的 dom 元素的大小。
您根据 #size-2 元素的 500px 和 960px 宽度在 #size-2 元素上调整 19px 和 25px 之间的文本大小
resizeTextInRange(500,960,19,25,'#size-2');
您根据 body 元素的 500px 和 960px 宽度在 #size-1 元素上调整 13px 和 20px 之间的文本大小
resizeTextInRange(500,960,13,20,'#size-1','body');
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');
});
});
于 2016-09-06T15:22:31.080 回答
1
这对我最有效（其中 0.5 是字体大小缩放因子）
font-size: calc(.5 * (1.5vh + 1.1vw));
由于屏幕通常比高度更宽，因此我使用了 1.1:1.5 的比例。
我注意到，当我使用这个公式时，无论我使用什么级别的缩放，字体大小都保持不变。
于 2021-07-14T17:52:42.913 回答
0
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
return (actualFontSize / maxScreenWidth) * window.innerWidth;
}
// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)
</script>
我希望这将有所帮助。我将这个公式用于我的 Phase 游戏。
于 2020-05-06T09:47:32.563 回答