高分辨率手机上的响应式设计

Question

据我了解（如果我错了，请纠正我）现代的响应式网站会根据您使用的设备的大小和类型进行更改。或者，如果窗口大小发生变化，也可以应用此方法。

我的问题是，为什么我的手机会像现代 1080p 显示器那样显示响应式网站。

基本上，我当前的显示器运行在 30"，分辨率为 768p。我的手机也有 768p 的分辨率。

许多响应式网站使用媒体查询来根据像素宽度显示 CSS 文件。

这对我的显示器和手机来说不是一样的吗？

我的问题：如何根据屏幕尺寸（以英寸等）而不是屏幕分辨率或像素数使网站具有响应性。

编辑：我的响应式设计有 3 级 CSS 用于不同的像素宽度（媒体查询）。在显示器或智能手机上查看时，会显示最高级别（767p 以上）。我怎样才能让我的智能手机显示我的最低级别 CSS（低于 480p），即使它实际上有更多像素。

Answer 1

我最近使用类似技术创建了一个网站http://www.super-rod.tv/ 它针对 PC 和移动设备，并将响应动态浏览器宽度调整。 我使用了最大宽度列表的媒体查询，从最高到最低。对于 1080P 屏幕，它具有最好的全屏显示效果，对于 4K 屏幕等较大屏幕，它将以纹理背景为中心，在 768P 等较低分辨率上，它使用较小的图像集，并且就像在 4K 屏幕上一样居中。 如果您只针对移动设备，则可以使用 device-width 代替，请参阅此处的参考文献width versus device-width 要强制使用最低 CSS 集，您可以使用 1000px 的最大宽度（我认为那些仍在 PC 上使用 800x600 的人不会成为您的目标？），这将传递所有桌面，或者您可以使用浏览器UA 告诉（定义所有 IE、Safari、FF、Chrome、Opera 等，其余为手机）。