响应式设计：最大设备宽度、最大宽度和最小设备像素比
Responsive Design: max-device-width, max-width and min-device-pixel-ratio
我目前正在访问一个需要在屏幕宽度和像素密度方面完全响应的网站。我的主要问题是如何获得 HiDPI 设备（例如 galaxy s4）的响应能力。
我已经阅读了有关最小设备像素比的信息，但我没有完全理解它，我的尝试也没有奏效。我所有的 less/css 都使用 rems 作为单位，所以基本上我应该能够只操纵 html 标签上的字体大小，以获得我想要的，对吧？但这也许是胡说八道？
但是，我想询问最佳实践以及提示和技巧。
对我来说重要的是，我没有桌面和移动设备的多个版本或子域。我想用媒体查询来完成这一切。
非常感谢您。非常感谢您的帮助！
干杯
Hidpi 仅表示 1 css 像素使用 3x3 实际像素渲染（这因设备而异，iPhone 像素密度为 2- 所以 iPhone 1 css 像素由 4 个实际 LCD 像素组成。）。 galaxy s4 上的网站仍呈现为 360x640 像素，像素密度为 3，因此您不需要任何额外的 css 用于 HiDPI 设备。
您只需要在年头部分添加此元标记
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
并应用 css 作为常规非 HiDPI 设备。
除了 pankijs 所写的之外，请注意，不同的浏览器（chrome、android 本机浏览器、firefox 等）以不同的方式处理媒体查询。例如，如果您使用：
@media only screen and (max-width : 480px)
它可以在桌面 Chrome 浏览器和 android 智能手机浏览器上运行，但不能在 iPhone 上的 Safari 上运行。要使其在 Safari 上运行，您必须使用：
@media only screen and (max-device-width : 480px)
结论是您需要在物理设备上测试您的媒体查询:)有关更多信息，请查看此页面：http://www.w3.org/TR/css3-mediaqueries/
我目前正在访问一个需要在屏幕宽度和像素密度方面完全响应的网站。我的主要问题是如何获得 HiDPI 设备（例如 galaxy s4）的响应能力。
我已经阅读了有关最小设备像素比的信息，但我没有完全理解它，我的尝试也没有奏效。我所有的 less/css 都使用 rems 作为单位，所以基本上我应该能够只操纵 html 标签上的字体大小，以获得我想要的，对吧？但这也许是胡说八道？
但是，我想询问最佳实践以及提示和技巧。 对我来说重要的是，我没有桌面和移动设备的多个版本或子域。我想用媒体查询来完成这一切。
非常感谢您。非常感谢您的帮助！
干杯
Hidpi 仅表示 1 css 像素使用 3x3 实际像素渲染（这因设备而异，iPhone 像素密度为 2- 所以 iPhone 1 css 像素由 4 个实际 LCD 像素组成。）。 galaxy s4 上的网站仍呈现为 360x640 像素，像素密度为 3，因此您不需要任何额外的 css 用于 HiDPI 设备。
您只需要在年头部分添加此元标记
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
并应用 css 作为常规非 HiDPI 设备。
除了 pankijs 所写的之外，请注意，不同的浏览器（chrome、android 本机浏览器、firefox 等）以不同的方式处理媒体查询。例如，如果您使用：
@media only screen and (max-width : 480px)
它可以在桌面 Chrome 浏览器和 android 智能手机浏览器上运行，但不能在 iPhone 上的 Safari 上运行。要使其在 Safari 上运行，您必须使用：
@media only screen and (max-device-width : 480px)
结论是您需要在物理设备上测试您的媒体查询:)有关更多信息，请查看此页面：http://www.w3.org/TR/css3-mediaqueries/