根据我的理解（如果我错了，请更正我），现代响应式网站将根据您使用的设备的大小和类型进行更改 . 或者，如果窗口大小发生变化，则可以应用此选项 .
我的问题是为什么我的手机显示响应式网站就像现代1080p显示器显示它一样 .
基本上，我目前的显示器运行在30“，分辨率为768p . 我的手机的分辨率也是768p .
许多响应式网站使用媒体查询来显示基于像素宽度的CSS文件 .
我的显示器和手机都不一样吗？
我的问题：如何根据屏幕尺寸（以英寸等为单位）使网站响应，而不是屏幕分辨率或像素数 .
编辑：我的响应式设计有3个级别的CSS用于不同的像素宽度（媒体查询） . 在显示器或智能手机上查看时，它会显示最高级别（767p以上） . 如何让我的智能手机显示最低级别的CSS（低于480p），即使它实际上有更多的像素 .
1 回答
我最近创建了一个使用类似技术的网站http://www.super-rod.tv/它针对PC和移动设备，并将响应动态浏览器宽度调整大小 . 我使用媒体查询，最大宽度列表从最高到最低 . 对于1080P屏幕，它具有最佳的全屏显示，对于较大的屏幕，如4K屏幕，它将以纹理背景为中心，在较低的分辨率（如768P）上，它使用较小的图像集，并且也像在4K屏幕上一样居中 . 如果你只是针对移动设备，你可以使用设备宽度而不是在这里看到参考width versus device-width要强制使用最低的CSS设置，你可以使用最大宽度1000px（我不认为那些仍然在PC上使用800x600的人会是你的目标吗？），这会传递所有桌面，或者你可以使用浏览器UA告诉（定义所有的IE，Safari，FF，Chrome，Opera等，其余的都是手机） .