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

我有一个流体网站，菜单是其宽度的20％。我想要正确测量菜单的字体大小，以便它始终适合框的宽度，并且永远不会换行到下一行。我正在考虑使用“em”作为单位，但它与浏览器的字体大小有关，所以当我更改分辨率时，字体大小保持不变。相对于用户屏幕分辨率的字体大小？

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

请给我一个如何进行的暗示，请。

来源

2012-08-02 barakuda28

@media screen and (max-device-width : 320px) 
{ 
    body or yourdiv element 
    { 
    font:<size>px/em/cm; 
    } 
} 
@media screen and (max-device-width : 1204px) 
{ 
    body or yourdiv element 
    { 
    font:<size>px/em/cm; 
    } 
}

您可以根据屏幕的大小手动给它，只要看看不同的屏幕大小，并手动添加字体大小。

来源

2012-08-02 12:48:28

+11

重要说明：您需要将其添加到您的html头部。 '' 此外，您可以使用'max-width'而不是'max-device-width'来获得更加'快速'的感觉。 – Sheharyar 2013-07-18 21:25:28

@ user65165我没有得到你想说的话？ – 2017-03-01 02:51:33

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

我没有用过这个第二个工具，但它似乎类似：https://github.com/zachleat/BigText

来源

2012-08-02 12:43:00 CoderJK

您可以使用em，%，px。但要结合media-queriesSee this Link了解媒体查询。此外，相对于当前视口尺寸，CSS3具有一些用于确定尺寸的新值：vw,vh和vmin。关于这个，请参阅link。

来源

2012-08-02 12:45:58

+12

'vw' ，'vh'，'vmin'摇这个答案。 – 2013-10-21 19:57:40

这是现在正确的答案，因为每个浏览器都支持视口单元：http://caniuse.com/#feat=viewport-units。 – cazzer 2016-06-05 03:42:55

我已经开发了一个很好的解决方案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+'%'); 
}

来源

2013-07-24 21:54:57

有趣的解决方案，不错。我测试了我通过做如何使用，但惠特这我固定在maxW大小窗口上的10px大小的文本，没关系？但这？什么是“16” 这是什么？ var fpc = fw * 100/16; – 2016-09-06 12:10:17

检查我的变体http://stackoverflow.com/a/39352651/189411 – 2016-09-06 15:23:00

有几种方法可以做到这一点

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

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等于当前字体大小，例如，如果文档的字体大小是12pt，则1em等于12pt。 Ems的性质是可扩展的，所以2em等于24pt，.5em等于6pt等。
百分比（％）：百分比单位很像“em”单位，除了一些基本差异。首先，当前字体大小等于100％（即12pt = 100％）。在使用百分比单位时，您的文字对于移动设备和辅助功能仍可完全扩展。

看到kyleschaeffer.com/....

CSS3支持新的尺寸是相对于查看端口。但是，这并不在视口的宽度的机器人

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

来源

2014-02-24 07:41:08 aWebDeveloper

不知道为什么这很复杂。我会这样做基本javascript

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

其中12意味着在1280分辨率12px。你决定要在这里

来源

2015-05-27 07:40:11 user3334188

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

一个变体，您可以设置最小和最大文本大小分钟，并要“检查”大小框的最大尺寸的关系的价值。另外，您可以检查dom元素的大小，而不是您希望应用文本大小的框。

您调整＃大小-2元件上19px和25像素之间文本，基于500像素和960像素宽＃大小-2的元件

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

您调整＃大小-1元件上13像素和20像素之间文本的基础上，500像素960像素和宽度体元件的

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

来源

2016-09-06 15:22:31

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

回答

相关问题