CSS布局：保持盒子宽度在不同的缩放级别

发布于 2025-02-10 13:39:24 字数 943 浏览 1 评论 0原文

这似乎是一个简单的问题，但我在这里/带有搜索引擎找不到任何东西。

让我们首先定义我的含义“相同”：我的意思是，如果我将统治者（塑料塑料）放在屏幕旁边，盒子总是以不同的缩放级别为单位，在厘米中保持相同的宽度（无论那是什么）。

我们还可以说，我正在谈论桌面浏览器，因为我不想通过移动考虑使事情复杂化。另外，浏览器应该足够宽，以便有一些额外的缩放空间。

这是盒子：

<div></div>

div {
  border: solid 1px #000;
  width: 800px;
  height: 200px;
  margin: auto;
}

https://jsfiddle.net/a4be6ov5/ 改变。浏览器的开发人员工具将始终表明宽度为200px，因为此变焦的方式的工作方式。但是我实际想要的是，与我们的统治者相比，我希望它与初始宽度相匹配。

我可以用视口单元部分地做到这一点，但是我无法通过计算某些内容来自动做到这一点。我只能通过手动定义更改框宽度的所有步骤来做到这一点。事实证明这很麻烦，并且有太多步骤要做。例如，我可以这样做：

@media screen and (min-width: 1500px) {
    div {
        width: 53vw
    }
}

...不是很容易。

如何自动对所有屏幕宽度和缩放级别进行此操作？

原文

This seems like a simple question, but I couldn't find anything here/with search engines.

Let's first define what I mean by "same": I mean that if I put a ruler (the plastic one) next to the screen, the box would always, in different zoom levels, be the same width in centimeters (whatever that would be).

Let's also say that I'm talking about desktop browsers, since I don't want to complicate things by taking mobile into account. Also the browser should be wide enough to let there be some extra space for zooming.

Here is the box:
https://jsfiddle.net/a4be6ov5/

<div></div>

div {
  border: solid 1px #000;
  width: 800px;
  height: 200px;
  margin: auto;
}

Now, if you zoom in/out, the box width will change. The browser's Developer Tools will always show that the width is 200px, because the way this zoom thing works. But what I would actually want, is that I would want it to match the initial width compared to that ruler of ours.

I can partly do that with viewport units, but I couldn't figure out to do it automatically by calculating something. I could only do it by manually defining all the steps at which to change the box width. This turns out to be cumbersome and there are too many steps to do it at. For example I could do this:

@media screen and (min-width: 1500px) {
    div {
        width: 53vw
    }
}

... not very easy.

How to do this automatically for all the screen widths and zoom levels?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枕梦 2025-02-17 13:39:24

在您的页面上有一个滑块，该滑块会改变身体元素（或选定元素）的字体大小？

document.querySelector('input').addEventListener("input", evt => {
  document.querySelector('.body').style.fontSize = evt.target.value + 'px'
})

.a, .b {
  background-color: cyan;
  width: 250px;
  height: 250px;
  padding: 1em;
  overflow: auto;
  display: inline-block;
  box-sizing: border-box;
}
.a {
  background-color: cyan;
}
.b {
  background-color: lime;
}

<p>
Smaller <input type="range" min="10" max="22" value="16"> Larger
</p>
<div class="body">
  <div class="a">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel aliquet mauris. Donec ipsum orci, ornare et tellus at, pretium aliquet nibh. Praesent quis tincidunt tortor. Integer ac varius nisi. Integer tempus varius justo. Quisque eget elementum sapien. Mauris id blandit arcu. Mauris dui erat, ultrices vitae ligula vitae, auctor cursus lacus.
  </div>
  <div class="b">
    Cras venenatis, nunc in tempus dictum, justo augue imperdiet nisl, id rutrum eros quam sed arcu. Maecenas fringilla diam in erat venenatis, sed sagittis elit tincidunt. Vivamus vel varius ex, id scelerisque ante. Donec ultricies, urna at aliquet gravida, urna erat porta nibh, vel semper magna urna eu dolor. Nullam condimentum ex ligula, a fringilla tortor eleifend in. Vestibulum congue eget lectus vel congue. Praesent eget malesuada est. Nulla nec semper nunc. Mauris id nulla molestie, varius turpis ut, pulvinar tortor.
  </div>
</div>

What about having a slider on your page which alters the font size of your body element (or selected elements)?

document.querySelector('input').addEventListener("input", evt => {
  document.querySelector('.body').style.fontSize = evt.target.value + 'px'
})

.a, .b {
  background-color: cyan;
  width: 250px;
  height: 250px;
  padding: 1em;
  overflow: auto;
  display: inline-block;
  box-sizing: border-box;
}
.a {
  background-color: cyan;
}
.b {
  background-color: lime;
}

<p>
Smaller <input type="range" min="10" max="22" value="16"> Larger
</p>
<div class="body">
  <div class="a">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel aliquet mauris. Donec ipsum orci, ornare et tellus at, pretium aliquet nibh. Praesent quis tincidunt tortor. Integer ac varius nisi. Integer tempus varius justo. Quisque eget elementum sapien. Mauris id blandit arcu. Mauris dui erat, ultrices vitae ligula vitae, auctor cursus lacus.
  </div>
  <div class="b">
    Cras venenatis, nunc in tempus dictum, justo augue imperdiet nisl, id rutrum eros quam sed arcu. Maecenas fringilla diam in erat venenatis, sed sagittis elit tincidunt. Vivamus vel varius ex, id scelerisque ante. Donec ultricies, urna at aliquet gravida, urna erat porta nibh, vel semper magna urna eu dolor. Nullam condimentum ex ligula, a fringilla tortor eleifend in. Vestibulum congue eget lectus vel congue. Praesent eget malesuada est. Nulla nec semper nunc. Mauris id nulla molestie, varius turpis ut, pulvinar tortor.
  </div>
</div>

回复收藏 0 原文

~没有更多了~