zooming 相关问题

我会添加我的网站按钮 A + 和 A- 进行缩放。我希望全身都是毛茸茸的所以我创建了这段代码 .container{宽度：800px;背景：#000;...</desc> <question vote="3"> <p>我会添加我的网站按钮 A + 和 A- 进行缩放。我希望全身都是毛茸茸的所以我创建了这段代码</p> <pre><code><html> <body> <style> .container{width: 800px;background: #000;} p{color:#fff;} a { color: #FFCC00;} </style> <div class="container"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p> <script type="text/javascript"> function ZoomScreen100() { document.body.style.zoom="100%" } function ZoomScreen200() { document.body.style.zoom="200%" } function ZoomScreen300() { document.body.style.zoom="300%" } function ZoomScreen400() { document.body.style.zoom="400%" document.body.style.zoom="400%" } </script> <a href="#" onclick="ZoomScreen100()">A+</a> <a href="#" onclick="ZoomScreen200()">A+</a> <a href="#" onclick="ZoomScreen300()">A+</a> <a href="#" onclick="ZoomScreen400()">A+</a> </body> </code></pre> <p> 它适用于 Chrome、Internet Explorer、Safari，但不适用于 Firefox 和 Opera。为什么？</p> </question> <answer tick="true" vote="6"> <p><pre><code>zoom</code></pre>是一个非标准属性，<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=390936" rel="nofollow noreferrer">尚未被Firefox实现</a>，最接近的跨浏览器属性是<pre><code>transform</code></pre>（<a href="http://jsfiddle.net/Akm4D/1" rel="nofollow noreferrer">demo</a>）：</p> <pre><code>document.body.style.transform = 'scale(2)'; </code></pre> <p>但是，效果与应用<pre><code>zoom</code></pre>不同：父上下文（例如宽度、高度）不会更新。如果这是您的意图，您可能需要考虑使用 <pre><code>calc()</code></pre> 和所选属性的乘数：</p> <pre><code>document.body.style['--zoom'] = '2'; document.body.style.fontSize = 'calc(16px * var(--zoom))`; </code></pre> </answer> <answer tick="false" vote="1"> <p>看看 <a href="http://www.browsersupport.net/CSS/zoom" rel="nofollow">http://www.browsersupport.net/CSS/zoom</a>。我无法让它在 Firefox 或 Opera 中正常工作，最直接的解释是这些浏览器还没有实现对它的支持。（Firefox 23.0.1 通过了链接站点上的一项测试；Opera 12.16 均未通过。）</p> <p>这不是你写的——而是你提到的浏览器还没有准备好。（这并不奇怪——尽管你会发现网站告诉你缩放是在规范中的，但我在实际的 w3c 文档中找不到它的任何地方列出。也许是在喝了更多咖啡因之后......）</p> <p>话虽这么说，请记住，兼容的页面将有一个元素，这就是样式所在的位置。我认为这是一个快速的冲刺，你忘记了头部元素。 :)</p> </answer> <answer tick="false" vote="1"> <p><a href="https://stackoverflow.com/a/64473943/3534015">https://stackoverflow.com/a/64473943/3534015</a></p> <p>最好的解决方案是使用 <pre><code>zoom: 50%</code></pre></p> <p>我用 javascript 做了这个例子，你可以测试它并根据需要更改它</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var zoomediv = document.getElementById('zoomediv') var zoomin_button = document.querySelector('#zoomin') zoomin_button.addEventListener('click', function(){ zoomediv.style.zoom = '125%' }) var zoomout_button = document.querySelector('#zoomout') zoomout_button.addEventListener('click', () => { zoomediv.style.zoom = '75%' })</code></pre> <pre><code>div { background: #f0f0f0; border: 1px solid #e0e0e0; width: fit-content; padding: 1rem; margin-bottom: 1rem; } button { padding: 0 3rem; }</code></pre> <pre><code><div id="zoomediv"> <h1> Title </h1> <p> this is a paragraph </p> </div> <button id="zoomin"> <h1> + </h1> </button> <button id="zoomout"> <h1> - </h1> </button></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>不错但这不是真正的缩放比例</p> <p>模拟时钟时间选择器不工作和添加时隙是目标</p> <p><a href="https://ldijkman.github.io/randomnerd_esp32_wifi_manager/mrs/create_from_scratch/testarea/zoomtest.html" rel="nofollow noreferrer">https://ldijkman.github.io/randomnerd_esp32_wifi_manager/mrs/create_from_scratch/testarea/zoomtest.html</a></p> <p><a href="https://i.stack.imgur.com/YLe4M.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1lMZTRNLnBuZw==" alt=""/></a></p> </answer> </body></html>

javascript css function browser zooming

回答 0 投票 0

响应式设计问题：放大/缩小时元素移位和重叠[关闭]

我是网页设计的初学者，我在网站上遇到了响应式设计的挑战。当我放大网站时，容器内的元素分散得太远，导致

html css layout responsive-design zooming

回答 1 投票 0

HTML/CSS 中浏览器放大/缩小时容器项重叠和位移问题

我是这个领域学习网页设计的初学者，所以我面临这个问题当我放大网站时，容器内的元素往往会彼此远离，从而导致

html css layout zooming overlapping

回答 1 投票 0

VSCode 放大.png

有没有办法在 VSCode 中放大图像（特别是 .png）？我的存储库包含一些非常小的图像，我想在不打开其他应用程序的情况下查看它们。我以为...