3

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

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

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

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

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

我的问题:如何根据屏幕尺寸(以英寸等)而不是屏幕分辨率或像素数使网站响应。

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

4

1 回答 1

0

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

于 2013-10-09T03:50:57.870 回答