相對於用戶屏幕分辨率的字體大小？

我有一個流體網站，菜單是其寬度的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

相對於用戶屏幕分辨率的字體大小？

回答

相關問題