Question

我想制作一个媒体查询，只针对我的手机。我会使用什么断点？

例如，我的身体最大宽度为800px宽，2px边距。当窗口小于800px（移动？）时，我希望它的边距为0px（这适用于我的浏览器）。事实证明我的手机屏幕是高分辨率，因此显示器的宽度永远不会低于800px！

这是因为像素比率？

我该怎么办？

Answer 1

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

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

视图端口标记和样式中的媒体查询的组合将允许您根据屏幕大小更改样式规则。最好只是让事情变得丑陋，而不是根据下个月会改变的“今天”的屏幕尺寸。

我建议先从最小的屏幕开始构建，然后随着这样的样式向上移动：

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

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

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

等

https://jsfiddle.net/5qhmrym5/

如果您已经构建了自己的网站..并且您确实希望定位较小的屏幕，则可以使用max-width而不是min-width - 但我发现覆盖样式需要更多的时间和精力顺便说一下 - 然后它就会上升，因为样式对于大屏幕来说会变得更复杂。

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

Answer 2

如果要在移动设备上查看要更改的边距值，则应将显示屏设计为在移动设备尺寸以上的任何屏幕上使用，宽度为800px，然后创建媒体查询，类似于链接中的链接评论由@Hynes，它将利润率改为0px。

假设您的设备由于比率而宽度为800px，这是正确的，但它也与分辨率有关，这是类似的主题。如果你想象一个体育巨型屏幕，一个像素几乎是一个led的大小，而1080px显示笔记本电脑，其像素几乎是不可观察的。比率和分辨率是显示器难以制作的原因，以及为什么诸如em和百分比之类的值已经出现，以绕过显示器的差异。这也是媒体查询如此有用的一个重要原因

Answer 3

html {
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}

尝试在你的CSS上使用box-sizing：border-box以及百分比，这是我喜欢的方式，但你肯定会找到关于它的大量信息，只需谷歌吧。

Answer 4

找到解决方案：https://stackoverflow.com/a/18500871/5906166

您需要在标题中包含此内容：

<meta name="viewport" content="width=device-width, initial-scale=1">

解释：

幸运的是，您可以在<head>部分指定一个视口元标记您的文档，以控制的宽度和缩放比例浏览器的视口。如果此标记的内容值为 width =设备宽度，屏幕的宽度将与设备匹配独立像素并将确保所有不同的设备应该规模和行为一致。

媒体查询仅针对移动设备

4 个答案: