设备/屏幕宽度相同但屏幕/设备宽度不同时的响应

Question

我遇到了一个问题，让我们讨论一下。

iphone 8 的设备宽度为 375 像素，屏幕宽度约为 2.300 英寸。另一方面，iphone 10 的设备宽度为 375 像素，屏幕宽度约为 2.456 英寸。 相同的设备宽度但不同的屏幕宽度。

让，我将元素的宽度设置为 100 像素。因此，该元素在 iphone 10 上将包含比 iphone 8 更大的屏幕空间。我如何在响应式网页设计方面解决此类问题？

再说一次，我有一个虚构的设备，它的设备宽度 375px 和屏幕宽度 8.000 英寸。那么解决方案是什么？

再说一次，如果设备宽度 320px 和屏幕宽度 2.300 英寸，那么解决方案是什么？

提前致谢。

注意：我是否遗漏了响应式网页设计的一些内容？那么请告知，因为我是新人。

Answer 1

响应式网页设计有多种方法。

我们可能用来说明不同屏幕尺寸、方向和纵横比的东西是媒体查询 .
有不同级别的媒体查询，在第 4 级，这些媒体功能已被弃用：

<头>

姓名	总结	注意事项
设备纵横比	输出设备的宽高比	已在 媒体查询级别 4 中弃用。
设备高度	输出设备渲染面的高度	已在 媒体查询级别 4 中弃用。
设备宽度	输出设备渲染面的宽度	已在 媒体查询级别 4 中弃用。

重要的是浏览器中定义的视口的纵横比、高度和宽度。

所有的解释。当我们定义媒体查询时，重点是高度和宽度度量，单位是mix help、px 和方向，例如{{1} } 和 em。

这些独立于 portrait 或 landscape 中的设备大小。