无论使用CSS进行浏览器缩放，如何获得2px宽边框

Question

我在网站上有两个div： 一个宽1px的边框;另一个div的边界宽度为2px。

当我将变焦率改为100％以下（精确值因浏览器而异，我假设屏幕分辨率等）时，2px div看起来很像1px div。 （发生在IE和Chrome中）

有没有办法将边框的宽度保持在2px而不管缩放？ 或者有人有不同/更好的建议来保持div之间的边界宽度比率吗？

Answer 1

我建议您不要担心，但如果它对您非常重要，您可以捕获当前的浏览器缩放信息并基于此来计算您的CSS。

即：如果当前浏览器缩放率为80％，则需要将div CSS缩放属性增加25％（* 1.25）。

提示：How to detect page zoom level in all modern browsers?

Answer 2

浏览器中有两种“缩放”方式：

实现缩放的原始尝试/功能是能够在浏览器中更改根字体大小（默认为16px），然后开发人员可以使用它来实现自定义逻辑如何处理不同的根字体大小（例如，混合相对）长度单位em和rem有固定的单位）。不幸的是，大多数开发人员通过设置固定的根字体大小禁用此功因此，几乎没有人使用它（即使它会给开发人员完全控制）

第二种，现在主要使用缩放功能（因为它只是工作）是所提到的一切缩放。一切都变得越来越大。你无法控制这一点。

Answer 3

原来有一种方法可以做到这一点（这需要额外的html标签，但没有javascript）。

而不是一个带有2px边框的“div”，我创建了两个“div”，每个都有1px边框。两者都位于同一位置，但外部div比内部宽2像素。

这样它看起来像一个带有2px边框的div，当缩放低于100％时，此边框将保持2px。