logo标签列表

如何使用CSS设置缩放级别

htmlcssfirefoxzooming
12

我一直在使用Firefox浏览器开发Web应用程序，并设置了初始缩放级别（使用ctrl+滚轮）。现在在另一台PC上使用Firefox测试时，默认的100%似乎太大了。我能否使用CSS设置默认值？

4个回答
15

    <html>    
        <body>
            <div id="sampleDiv" style="width: 100px; background-color: Gray;">
                Zoom Me
            </div>
            <button onclick="sampleDiv.style.zoom='300%'">Zoom 300%</button>
            <button onclick="sampleDiv.style.zoom='200%'">Zoom 200%</button>
            <button onclick="sampleDiv.style.zoom='100%'">Zoom 100%</button>
        </body>
    </html>

9

DA说，缩放是用户可控的设置，但您可以相对于缩放调整大小，如果用户不使用Ctr + -进行调整大小，而是通过设置默认字体大小来更改大小，则可以通过以像素为单位设置字体大小（而不是ems、％等）来覆盖此默认设置....但是，这通常被认为是不良实践，因为它可能使一些人的字母/大小不可读和不可更改，他们不知道Ctr + -并依赖于默认字体大小。

您可以通过以ems或％设置字体大小来相对于用户默认设置和缩放设置调整大小。这将根据用户设置的大小更改大小。

这使您可以使每个页面在另一个人看起来与您看起来的样子相同....因为每个人对“小”，“中”和“大”的感知是不同的。

8
你可以使用CSS属性zoom来设置缩放。这是一个旧的IE技术，也被Chrome和Safari支持。
.zoom
{
    zoom: 120%;
}

然而，这可能不适合用于实时网站...
这仍然可以做到 xd。 - EugenSunic
它不会以相同的方式行为（不会缩放所有元素）。 - spyro
7

页面缩放是浏览器的功能，而非 CSS 设置（好吧，除了那个 IE 的专有设置，但那更多的是为了修复 IE 的 bug）。因此，它是用户可控制的变量，而不是你可以控制的任何东西。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接