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

Question

我想进行媒体查询以仅针对我的 phone。我会使用什么断点？

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

这是因为像素比例吗？

我该怎么办？

Answer 1

如果您想要更改的是在移动设备上查看时的边距值，您应该将显示设计为在移动设备尺寸以上的任何屏幕上使用，宽度为 800 像素，然后创建媒体查询，类似于link @Hynes 评论，仅将边距更改为 0px。

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

Answer 2

meta-view-port 标签改变了网站在 phone 或其他可能想要 'adjust' 网站的小屏幕上的显示方式。

一些屏幕，例如 - iphone 5 - 没有 meta-view-port 标签，将调整网站大小以适合您的屏幕/但就像您网站的缩小版本一样。 https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

视口标记和样式中的媒体查询的组合允许您根据屏幕尺寸更改样式规则。最好只是在事情变得丑陋的地方休息，而不是基于下个月将改变的 "Today" 屏幕尺寸。

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

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 */
}

Answer 3

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

尝试在你的 css 上使用 box-sizing: border-box 和百分比，这是我喜欢的方式，但你肯定会找到很多关于它的信息，只是 google它。

Answer 4

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

您需要在您的 header 中包含此内容：

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

解释：

Fortunately, you can specify a viewport meta tag in the <head> section of your document in order to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.

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

Media Query to Target ONLY Mobile

css

media-queries