无论屏幕分辨率如何，保持 div 大小相同

【问题标题】：Keeping a div the same size no matter the screen resolution无论屏幕分辨率如何，保持 div 大小相同
【发布时间】：2015-06-12 20:35:27
【问题描述】：

简单的问题，可能很明显，但是我制作了一个圆形 div，它将是 floating action button。无论屏幕尺寸或分辨率如何，我都希望它的尺寸相同。例如，如果它在智能手机上是半英寸宽，我希望它在 iMac 上也是半英寸宽。我怎样才能做到这一点？

.fab {
    width: 58px;
    height: 58px;
    position: relative;
    border-radius: 50%;
    background: #F44336;
}

&lt;div class="fab"&gt;&lt;/div&gt;

【问题讨论】：

标签： css html

【解决方案1】：

有 6 种不同的单位可以为元素指定宽度高度。

厘米 ="厘米"

mm="毫米"

in="英寸"

像素="像素"

pt="点数"

电脑="picas"

这里的前三个 cm、mm 和 in 是不依赖屏幕分辨率等的单位。请改用这三个单位之一px

【讨论】：

甜蜜！没想到你可以使用现实生活中的计量单位。
请注意，在当前的 CSS 定义中，所有这些单位都是“现实生活”单位。 pc 为 1/6 英寸，pt 为 1/72 英寸，px 为 1/96 英寸。只是在低分辨率的屏幕上（比如普通的桌面显示器），1 px 被四舍五入到一个硬件像素，其他单位也相应地进行缩放。例如，如果您的显示器是 110dpi，1in 仍然是 96 像素，即大约 0.87 英寸。使用更高分辨率的设备（例如打印机）时，近似值会更好。