HTML使字体的缩放方式与页面的缩放方式相同

Question

我想用HTML创建一个A4风格的页面.但是,每当我放大和缩小时,我都希望它看起来一样.例如,请查看以下屏幕截图:

当我缩小时,页面内的段落看起来更长.我想要的是一个Word Style放大和缩小.

以下是此页面编码的方式:

<div class="document">
<div    class="page">
    <div class="content">
        <h1>Hello World</h1>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
</div>

CSS代码:

body {
    margin: 0;
    padding: 0;
    background-color: grey;
}


.page{
    margin:auto;
    margin-top:50px;
    width:210mm;
    height:297mm;
    background-color:white;
    border:1px solid black;
    padding:0px;
}

.content{
    background-color:   orange;
    margin:10%;
}

Answer 1

Webkit 浏览器（如 Chrome 或 Opera）尝试在低缩放（如 25%）时调整文本大小以使其可读。如果您查看计算的 css，您会注意到字体大小正在变化，即使您在 css 中定义了它。您需要一个插件来禁用此调整大小。

100% 放大镀铬

25% 放大 chrome

Internet Explorer 不会在低缩放时调整字体大小