如何使用 CSS 获得 2px 宽的边框而不考虑浏览器缩放
How to get a 2px wide border regardless of browser zoom with CSS
我在一个网站上有两个 div:
一个有 1px 宽的边框;另一个 div 有一个 2px 宽的边框。
当我将缩放比例更改为低于 100%(具体值因浏览器而异,我假设屏幕分辨率等)时,2px div 看起来非常像 1px div。 (发生在 IE 和 Chrome)
有没有办法让边框的宽度保持在 2px 而不管缩放?
或者有人 different/better 建议保留 div 之间的边框宽度比例?
我不建议你为此担心,但如果这对你来说真的很重要,你可以捕获当前的浏览器缩放信息并据此计算你的 CSS。
即:如果当前浏览器缩放为 80%,您需要将 div CSS 缩放 属性 增加 25% (*1.25)。
提示:How to detect page zoom level in all modern browsers?
在浏览器中"zooming"有两种方式:
实现缩放的最初attempt/feature是能够在浏览器中更改根字体大小(默认为 16px),然后开发人员可以使用它来实现自定义逻辑如何处理不同的根字体大小(例如,将相对长度单位 em
和 rem
与固定单位混合)。不幸的是,大多数开发人员通过设置固定的根字体大小来禁用此功能。因此几乎没有人使用它(即使它会给开发人员完全控制)
第二个也是现在主要使用的缩放功能(因为它很简单)是提到的所有内容的缩放。一切都只是变大或变小。你无法控制它。
事实证明有一种方法可以做到(这需要额外的 html 标签但不需要 javascript)。
我创建了两个 "divs",每个边框为 1px,而不是一个边框为 2px 的 "div"。两者位于同一位置,但外部 div 比内部的宽和高 2 像素。
这样看起来 div 有一个 2px 的边框,当缩放低于 100% 时,这个边框将保持在 2px。
我在一个网站上有两个 div: 一个有 1px 宽的边框;另一个 div 有一个 2px 宽的边框。
当我将缩放比例更改为低于 100%(具体值因浏览器而异,我假设屏幕分辨率等)时,2px div 看起来非常像 1px div。 (发生在 IE 和 Chrome)
有没有办法让边框的宽度保持在 2px 而不管缩放? 或者有人 different/better 建议保留 div 之间的边框宽度比例?
我不建议你为此担心,但如果这对你来说真的很重要,你可以捕获当前的浏览器缩放信息并据此计算你的 CSS。
即:如果当前浏览器缩放为 80%,您需要将 div CSS 缩放 属性 增加 25% (*1.25)。
提示:How to detect page zoom level in all modern browsers?
在浏览器中"zooming"有两种方式:
实现缩放的最初attempt/feature是能够在浏览器中更改根字体大小(默认为 16px),然后开发人员可以使用它来实现自定义逻辑如何处理不同的根字体大小(例如,将相对长度单位 em
和 rem
与固定单位混合)。不幸的是,大多数开发人员通过设置固定的根字体大小来禁用此功能。因此几乎没有人使用它(即使它会给开发人员完全控制)
第二个也是现在主要使用的缩放功能(因为它很简单)是提到的所有内容的缩放。一切都只是变大或变小。你无法控制它。
事实证明有一种方法可以做到(这需要额外的 html 标签但不需要 javascript)。
我创建了两个 "divs",每个边框为 1px,而不是一个边框为 2px 的 "div"。两者位于同一位置,但外部 div 比内部的宽和高 2 像素。
这样看起来 div 有一个 2px 的边框,当缩放低于 100% 时,这个边框将保持在 2px。