在 Chrome 中缩小到 33% 或更低，文本通过静态高度 div "climbs"

Question

最近我测试了一个网站，当我将其缩放到chrome中的33％或25％时，静态高度divs中的某些文本从此div。

中出发。

我读到：

1. 文本大小调整（现在是一种实验技术）
2. font-size-unjust（但是它在CSS 2中的支持下降，它将开始支持Chrome 44，实际版本仅42）。

您建议做什么？我了解，缩小到25-33％，这是不真实的IT真实情况，但这是一个问题。我在下面附上了JSFIDDLE和代码。

html

<div id="block">
    <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
<div>

CSS

#block {
    width: 100%;
    height: 200px;
    background-color: red;
}

Answer 1

我会添加"溢出：auto;"CSS属性具有静态高度。这样，当您缩小到不到33％时，滚动栏就会出现。结果，您的文字不会"戳出"。缩放到不到33％的缩小将在Chrome设置中缩小字体缩小到最小字体尺寸。据我所知，您无法将自定义字体大小相对于放大。

Answer 2

设置高度100％

#block {
    width: 100%;
    height: 100%;
    background-color: red;
}

<div id="block">
    <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
<div>