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

问题描述 投票：68回答：8

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

尝试了pts和百分比。因为我需要它没有任何作用......

请给我一些如何继续的提示。

css measurement
8个回答
47
投票
@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;
  }
}

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

45
投票

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

21
投票

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

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

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

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

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

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

见kyleschaeffer.com/....

CSS3支持相对于视口的新维度。但这在android中不起作用

  1. 3.2vw =视口宽度的3.2％
  2. 3.2vh =视口高度的3.2％
  3. 3.2vmin = 3.2vw或3.2vh的较小值
  4. 3.2vmax = 3.2vw或3.2vh的较大值 body { font-size: 3.2vw; }

看看css-tricks.com/....，还看看caniuse.com/....

17
投票

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

  1. 我只使用“em”来定义字体大小。
  2. html字体大小设置为10像素： html { font-size: 100%; font-size: 62.5%; }
  3. 我在文档就绪时调用字体大小调整功能：

//这需要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+'%');
}
5
投票

您可以尝试这个工具：http://fittextjs.com/

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

4
投票

不知道为什么这很复杂。我会做这个基本的JavaScript

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

12表示在1280分辨率下12px。您可以在此决定所需的值

2
投票

我创造了一个https://stackoverflow.com/a/17845473/189411的变种

您可以在其中设置最小和最大文本大小，与您要“检查”大小的框的最小和最大大小相关。此外，您可以检查不同于要应用文本大小的框的dom元素的大小。

您可以在＃size-2元素上调整19px和25px之间的文本大小，基于＃size-2元素的500px和960px宽度

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');
    });
});
0
投票

这对我有用：

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/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.