我想进行媒体查询以仅针对我的手机。我会使用什么断点？
例如，我的身体最大宽度为 800 像素宽，边距为 2 像素。当窗口小于 800 像素（移动设备？）时，我希望它的边距为 0 像素（这适用于我的浏览器）。原来我的手机屏幕是高分辨率的，因此显示屏的宽度永远不会低于 800 像素！
这是因为像素比吗？
我该怎么办？
【问题讨论】：
标签： css media-queries
meta-view-port 标签会改变网站在您的手机或其他可能想要为您“调整”网站的小屏幕上的显示方式。
某些屏幕，例如 - iphone 5 - 没有 meta-view-port 标签，会调整网站大小以适应您的屏幕/但就像缩小网站的小版本一样。 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 */
}
【讨论】：
如果您要更改的是在移动设备上查看时的边距值，您应该设计您的显示以在高于移动设备尺寸的任何屏幕上使用，800 像素宽，然后创建一个媒体查询，类似于评论链接中的那些@Hynes 将边距更改为 0px。
由于比率的原因，您假设您的设备是 800 像素宽是正确的，但它也与分辨率有关，这是类似的主题。如果您想象一个运动型巨型屏幕，一个像素几乎是一个 LED 大小，而 1080 像素显示屏笔记本电脑的像素几乎是不可观察的。比率和分辨率是显示难以制作的原因，也是出现诸如 em 和百分比之类的值以绕过显示差异的原因。这也是媒体查询如此有用的一个重要原因
【讨论】：
html {
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}
尝试在你的 CSS 上使用 box-sizing:border-box 和百分比，这是我喜欢的方式，但你肯定会找到很多关于它的信息，只需 google 即可。
【讨论】：
找到解决方案：https://stackoverflow.com/a/18500871/5906166
你需要在你的标题中包含这个：
<meta name="viewport" content="width=device-width, initial-scale=1">
解释：
幸运的是，您可以在
<head>部分指定视口元标记 以控制文档的宽度和缩放比例 浏览器的视口。如果此标签的内容值为 width=device-width，屏幕的宽度会和设备匹配 独立的像素，并确保所有不同的设备 规模和行为应该一致。
【讨论】：