分辨率更高的手機響應設計

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而不是ref here width vs device-width強制使用最低CSS集，您可以通過使用1000px的最大寬度（我認為那些仍然在PC上使用800x600是您的目標？），這會淘汰所有台式機，或者您可以使用瀏覽器UA告訴（為所有IE，Safari，FF，Chrome，Opera等定義，其余為移動設備）。