css - 仅针对移动设备的媒体查询

Question

我想进行媒体查询以仅定位我的手机。我将使用什么断点？

例如，我的正文最大宽度为 800 像素宽，边距为 2 像素。当窗口小于 800px(移动设备？)时，我希望其边距为 0px(这适用于我的浏览器)。事实证明，我的手机屏幕是高分辨率的，因此显示屏的宽度永远不会低于 800 像素!

这是因为像素比吗？

我该怎么办？

Answer 1

元 View 端口标签会更改网站在您的手机或其他可能想要为您“调整”网站的小屏幕上的显示方式。

某些屏幕，例如 iPhone 5，没有元 View 端口标签，会调整网站大小以适合您的屏幕/但就像缩小的网站的小版本一样。 https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

样式中的视口(viewport)标记和媒体查询的组合将允许您根据屏幕尺寸更改样式规则。最好只是在事情变得丑陋的时候进行突破，而不是基于下个月将改变的“今天”的屏幕尺寸。

我建议首先从最小的屏幕开始构建，然后使用如下样式向上移动:

html {
  height: 100%;
  background: blue;
}

@media (min-width: 400px) {
    html {
      background: red;
    }
}

@media (min-width: 850px) {
    html {
      background: green;
    }
}

等等

https://jsfiddle.net/5qhmrym5/

如果您已经构建了网站..并且您确实想针对较小的屏幕，则可以使用最大宽度而不是最小宽度 - 但我发现覆盖样式需要更多时间和精力向下 - 然后向上，因为对于较大的屏幕，样式会变得更加复杂。

@media (max-width: 850px) {
  /* styles */
}