响应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