1。使用`rem`来控制项目的大小：

通过使用rem，我可以更好地调整页面调整大小时缩放的内容。另一个选择是使用transform: scale()，根据这个问题的答案，我可能不得不使用它。

以下是显示此内容的html＆css片段：

<style type="text/css">
    @keyframes size { 0% { font-size: 62.5% } 25% { font-size:  100% } 50% { font-size: 62.5% } 75% { font-size:   25% } 100% { font-size: 62.5% } }
    :root { font-size: 62.5%; /* gives a base factor of 10px */ animation: size 10s infinite; }
    div         { padding: 40px; width: 200px; font-size: 40px; background: steelblue; text-align: center; margin: 16px; }
    div.zoomer  { padding: 4rem; width: 20rem; font-size: 4rem; background: steelblue; text-align: center; margin: 16px; }
    /* note that the margins are set to px on both versions (technically unnecessary but for illustration) and it can be controlled what gets resized */
</style>
<body>
    <div>px</div>
    <div class="zoomer">rem</div>
</body>

2。使用浏览器上的`resize`事件触发调整大小。

问题从这里开始。

我研究了可以听的各种“缩放”事件。其中包括wheel和keypress：

window.addEventListener('wheel',e => {
    if (e.ctrlKey) {
        e.preventDefault();
        // zoom handler
    }
});
window.addEventListener('keypress',e => {
    if ((e.charCode===61||e.charCode===45)&&e.ctrlKey) { // ctrl+, ctrl-
        e.preventDefault();
        // zoom handler
    }
});

但是主要的缩放事件是resize，因此聆听该事件更为有意义：

window.addEventListener('resize',handler);

收听resize事件的某些原因是：

除了作为缩放方法的ctrl+，ctrl-和ctrl[mousewheel]之外，浏览器菜单的一部分（浏览器右上角的“汉堡菜单”）允许您单击+，-，并在某些情况下将缩放重置为100%。我发现引发此事件的唯一事件是resize事件。
理论上，您可以触发自己的resize事件，然后对其进行正确处理。即如果您有一个自定义按钮：<button type="button" onclick="myZoomFunction(amount)">Zoom In</button>在网页本身上。
语义学

我在听resize时发现的问题是：

似乎preventDefault()在resize事件上不起作用。因此，您实际上无法阻止浏览器缩放（尽管您可以在preventDefault()和wheel上使用click来停止缩放）。
如果放大或缩小（我可以找到），则传入的event对象似乎不包含任何数据。

例如：

window.addEventListener('resize', e => {
    e.preventDefault(); // doesn't do anything.
    console.log(e.defaultPrevented); // false
    myZoomFunction(e.resizePropertyThatDoesNotExist);
})

// obviously this function is a conjecture as I need to figure out what values I can actually get passed in.
function myZoomFunction(amount) {
    const CURRENT_ROOT_FONT_SIZE_PX = Number.parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('font-size').replace(/\D+/g,''));
    return document.documentElement.style.fontSize = `${CURRENT_ROOT_FONT_SIZE_PX+amount}px`;
}

如果有人有任何想法，我正在尝试解决这两个问题。

捕获并使用调整大小事件

1。使用`rem`来控制项目的大小：

2。使用浏览器上的`resize`事件触发调整大小。

0 个答案:

捕获并使用调整大小事件

1。使用rem来控制项目的大小：

2。使用浏览器上的resize事件触发调整大小。

0 个答案:

1。使用`rem`来控制项目的大小：

2。使用浏览器上的`resize`事件触发调整大小。