gpt4 book ai didi

html - 如何在桌面和移动设备上制作相同物理尺寸的按钮?

转载 作者:行者123 更新时间:2023-11-28 02:12:51 26 4
gpt4 key购买 nike

我有一个即将进行的元素,在具有不同高度、宽度、显示纵横比(4:3、16)的不同设备上,元素(例如按钮)以物理相同尺寸(例如 3 厘米)显示是至关重要的:9)、设备像素比和 dpi。我如何使用 HTML + CSS(+ JavaScript)做到这一点?

为了实现响应式设计,我为所有设备设置了视口(viewport):

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

现在可以使用媒体查询在不同设备上布局我的网站。但是,当我定义一个具有固定高度/宽度的按钮类时,它会以不同的物理尺寸显示(例如在我的 MacOS Chrome 和 iOS Safari 上)。

.button {
padding: 10px;
border: none;
background: none;
border: 1px solid #000;

width: 150px;
height: 50px;
}

我了解 CSS 像素与物理像素。不过,该按钮在我的设备上显示的尺寸不同。有什么方法可以在不同设备上显示物理尺寸完全相同的按钮,而无需为每个设备编写媒体查询(因为这是一种不好的做法)?

最佳答案

这是不可能的,原因很简单:

第一台设备:video-projector = image is 250cm/175cm, resolution is 1920*1080第二台设备:ipad3 = 视网膜屏幕图像为240mm/180mm,分辨率为2048*1536

您是否尝试过以英寸定义尺寸?

width: 1.25in;
height: .75in;

关于html - 如何在桌面和移动设备上制作相同物理尺寸的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48649301/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com