響應CSS類型的縮放

Question

我越來越熟悉的vmin vh等 但我需要一個MROE優雅的解決方案，以顯示單詞列表說：

apple 
banana 
lemon 
pineapple 

所以列表總是需要在這種情況下，基於最長字的最大寬度「pineapple」

僅使用CSS有可能嗎？

Answer 1

如果你想有一個列表元素始終以一個頁面的X寬度，同時保持要素邊界流體能夠圍繞其內容擴展（而不是一個固定的寬度），你可以用它結合了inline-block顯示了一個解決方案html元件的font-size上的vw單元。但是，這會相應地縮放整個頁面中的所有內容。

（使全屏和調整頁面大小，看看名單適應）

// All javascript is necessary only for the button to demo list growth. 
 
function addCnt(){ 
 
    var pinapl = document.getElementById('pinapl'); 
 
    pinapl.innerHTML += 'e'; 
 
} 
 

 
var cnt = document.getElementById('cnt'); 
 
cnt.addEventListener('click', addCnt);

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
html { 
 
    font-family: sans-serif; 
 
    font-size: 6vw; /* setting vw value on HTML makes elements resize to viewport width */ 
 
} 
 
body { 
 
    display: flex; 
 
} 
 
ol { 
 
    display: inline-block; /* making list element inline-block forces content to determine its width */ 
 
    margin: auto; 
 
    background-color: #eee; 
 
    list-style-position: inside; 
 
} 
 
.cnt { 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    background-color: #000; 
 
    color: #eee; 
 
    font-size: 16px; 
 
    position: absolute; 
 
}

<ol> 
 
    <li>apple</li> 
 
    <li>banana</li> 
 
    <li>lemon</li> 
 
    <li id="pinapl">pineapple</li> 
 
</ol> 
 

 
<div id="cnt" class="cnt"> 
 
    click to add content 
 
</div>

Answer 2

沒有，純CSS，你不能告訴「設置font-size所以上最長的單詞自動適應視口「。你需要的JavaScript，想必FitText：

http://fittextjs.com//https://github.com/adactio/FitText.js