我的网站比较流畅，菜单是其宽度的20％。我希望菜单的字体大小能够正确测量，因此它始终适合于框的宽度，并且永远不要环绕到下一行。我原本以“ em”为单位，但它与浏览器的字体大小有关，因此当我更改分辨率时，字体大小保持不变。
也尝试了分数和百分比。什么都没有，因为我需要...
请给我提示如何进行。
我的网站比较流畅，菜单是其宽度的20％。我希望菜单的字体大小能够正确测量，因此它始终适合于框的宽度，并且永远不要环绕到下一行。我原本以“ em”为单位，但它与浏览器的字体大小有关，因此当我更改分辨率时，字体大小保持不变。
也尝试了分数和百分比。什么都没有，因为我需要...
请给我提示如何进行。
Answers:
@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;
}
}
您可以根据屏幕的屏幕大小手动给它。只需看看不同的屏幕大小并手动添加字体大小即可。
vw，vh，vmin摇滚这个答案。
vmax
有几种方法可以实现此目的。
CSS3支持与视口相关的新尺寸。但这在android中不起作用。
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的字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt。Root Ems本质上是可扩展的，因此2em等于24pt，.5em等于6pt，依此类推。
百分比（％）：百分比单位与“ em”单位非常相似，除了一些基本差异。首先，当前字体大小等于100％（即12pt = 100％）。使用百分比单位时，您的文本对于移动设备和可访问性仍然可以完全扩展。
em相对于容器的字体大小。当容器还设置了它的字体大小时，这可能导致意外的行为em。要获取相对于文档字体的大小，请使用rem。
我已经开发了一个不错的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+'%');
}
您可以尝试使用此工具：http : //fittextjs.com/
我没有使用第二个工具，但是看起来很相似：https : //github.com/zachleat/BigText
这为我工作：
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/
我创建了https://stackoverflow.com/a/17845473/189411的变体
您可以在其中设置要“检查”大小的框的最小和最大大小的关系的最小和最大文本大小。此外，您可以检查dom元素的大小，而不是要应用文本大小的框。
您根据＃size-2元素的500px和960px宽度在＃size-2元素上调整19px和25px之间的文本大小
resizeTextInRange(500,960,19,25,'#size-2');
您可以根据主体元素的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');
});
});
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
return (actualFontSize / maxScreenWidth) * window.innerWidth;
}
// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)
</script>
我希望这将有所帮助。我在我的Phase游戏中使用了这个公式。
<meta name="viewport" content="width=device-width" />您也可以使用max-width而不是max-device-width更“响应”的感觉。