如何解决为什么浏览器中的像素大小与我的显示分辨率不匹配?
我在MacBook上的分辨率为2560 x 1600 px,当我制作一个div
且尺寸参数比分辨率小一半(即1280 x 800)时,我希望我的浏览器使用一半的屏幕面积,但是而是显示缩放的对象,我该如何解决?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height: 800px; width: 1280px; background-color: cyan;">
</div>
</body>
</html>
解决方法
这是由于设备像素比率:如果DPR为2(对于大多数视网膜显示器),则每个“ CSS像素”(即您在CSS中设置的像素设置)是2倍设备像素的宽度和高度一样高,从而可以更好地解析基于矢量的图形(包括字体)。因此,您必须将设备的实际结果值除以该数字,以获得相应的CSS像素值。
在媒体查询中,您也可以使用设备像素,但不能在常规CSS规则中使用。
此处有更多信息:https://hacks.mozilla.org/2013/09/css-length-explained/
,请检查您的显示比例/缩放级别。
提示:如果要相对于我们的屏幕尺寸缩放div,可以在CSS中使用vh
和vw
。
100vh
是全角。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。