css - 基于列表中最长单词的响应式 CSS 类型缩放

Question

我越来越熟悉 vmin vh 等 但我需要一个优雅的解决方案来显示单词列表说:

apple
banana
lemon
pineapple

因此列表始终采用 w 视口(viewport)的最大宽度...基于本例中最长的单词“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>