Question

我有一个流畅的网站，菜单宽度的20％。我希望正确测量菜单的字体大小，因此它总是适合盒子的宽度，永远不会换行到下一行。我正在考虑使用“em”作为一个单元，但它与浏览器的字体大小有关，因此当我更改分辨率时，字体大小保持不变。

也尝试了百分比和百分比。没有什么能起作用，因为我需要它......

请给我一些如何处理的提示。

Answer 1

@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;
  }
}

您可以根据屏幕的屏幕尺寸手动给它。只需看一下不同的屏幕尺寸并手动添加字体大小。

Answer 2

您可以使用em，%，px。但与media-queries See this Link结合使用可了解媒体查询。此外，CSS3具有一些新值，用于调整与当前视口大小相关的内容：vw，vh和vmin。请参阅link。

Answer 3

有几种方法可以实现这个目标

使用媒体查询但需要多个断点的字体大小

    body
    {
        font-size: 22px; 
    }
    h1
    {
       font-size:44px;
    }

    @media (min-width: 768)
    {
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
    }

使用％或em 中的维度。只需更改基本字体大小，一切都会改变。与之前的版本不同，您可以随时更改正文字体而不是h1，或者将基本字体大小设置为默认设备并将其全部放在em中

“Ems”（em）：“em”是一个可扩展的单元。 em等于当前的字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt。 Ems本质上是可扩展的，所以2em等于24pt，.5em等于6pt等等。
百分比（％）：百分比单位与“em”单位非常相似，只是存在一些基本差异。首先，当前的字体大小等于100％（即12pt = 100％）。使用百分比单位时，您的文本仍然可以完全扩展到移动设备和可访问性。

请参阅kyleschaeffer.com/....

CSS3 支持与视图端口相关的新维度。但这在android

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/....

Answer 4

我开发了一个很好的JS解决方案 - 适用于完全响应的HTML（即使用百分比构建的HTML）

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+'%');
}

Answer 5

您可以尝试使用此工具：http://fittextjs.com/

我没有使用过第二个工具，但看起来很相似：https://github.com/zachleat/BigText

Answer 6

不确定为什么这很复杂。我会做这个基本的javascript

fileManager.setLocation(StandardLocation.CLASS_OUTPUT, Arrays.asList(new File("D:\proccess")));

其中12表示在1280分辨率下12px。你决定了你想要的价值

Answer 7

我创建了https://stackoverflow.com/a/17845473/189411

的变体

您可以在其中设置最小和最大文字大小，与您想要的框的最小和最大尺寸相关＆＃34;检查＆＃34;尺寸。此外，您可以检查不同于要应用文本大小的框的dom元素的大小。

根据＃size-2元素的500px和960px宽度，在＃size-2元素上调整19px和25px之间的文本

resizeTextInRange(500,960,19,25,'#size-2');

在＃size-1元素上调整13px和20px之间的文本大小，基于500px和960px宽度的body元素

resizeTextInRange(500,960,13,20,'#size-1','body');

完整代码有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');
    });
});

Answer 8

这对我有用：

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/

Answer 9

不使用媒体查询很好，因为它允许逐渐缩放字体大小。

使用vw单位将相对于视口大小调整字体大小。

将vw单位直接转换为字体大小将使移动分辨率和台式机都很难达到最佳效果。

我建议尝试以下方法：

body {
    font-size: calc(0.5em + 1vw);
}

信用：CSS In Depth

Answer 10

<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)

</script>

我希望这会有所帮助。我在我的Phase游戏中使用了这个公式。

Answer 11

这对我来说效果最好（其中 .5 是字体大小缩放系数）

font-size: calc(.5 * (1.5vh + 1.1vw));

由于屏幕通常比高度更宽，所以我使用了 1.1:1.5 的比例。

我注意到，当我使用这个公式时，无论我使用何种缩放级别，字体大小都保持完全相同。

字体大小相对于用户的屏幕分辨率？

11 个答案: