媒体查询令人头疼

Question

我的主智能手机是Galaxy S8 Plus。

此设备的媒体查询是：

@media only screen and (min-width: 360px) and (orientation: portrait)

让我们从纵向开始。这个，我理解100％，但问题来了。 这是横向媒体查询：

@media only screen and (min-width: 740px) and (orientation: landscape)

每次我在此媒体查询中编码时，它都适用于我的桌面，其分辨率为1920 * 1200。我知道它受min-width: 740px的影响。

现在，我的问题是：

• 我该如何解决这个问题？

• 我可以创建一个涵盖纵向和横向的单个查询吗？

• 如果是这样，响应式网页设计中的单位有哪些最佳做法？现在我在我的项目中使用vh和vw，但我认为它有时会造成混乱。

• 还有最后一个问题：如何以最少的查询次数覆盖大部分设备？

Answer 1

好的CSS很少。测试我的方法：

1. 顶级全球风格。例如字体颜色，字体粗细，背景等。
2. 然后，使用媒体查询：

@media screen and（max-width：1200px）{

}

@media screen and（max-width：992px）{

}

@media screen and（max-width：640px）{

}

依旧......更高的宽度在顶部。在“移动优先”方法中，使用最小宽度，然后降低宽度。

1. 尽量避免使用方向属性。仅在您确实需要时才使用此属性。
2. vw和vh很方便，但请记住，旧浏览器不支持它们。
3. Bootstrap是一个很好的框架，但你应该先学习如何从头开始制作逻辑CSS。保持良好的工作。

Answer 2

1. 要解决它适用于桌面更改min到max的问题，应该看到媒体查询here的“标准”，媒体查询描述了中等大小＆lt; 768px水平和非常小的＆lt; 1 576px

2. 您不需要包含方向，只需编写@media only screen and (min-width: 740px)然后您申请两者，但您应该有两个媒体查询以确保涵盖两者

3. vh和vw最适合创建自适应设计，但如果您正在为IE编码，那么它可能会出现问题，您需要找到一个计算高度的替代方案

4. 使用Boostrap，它几乎为你做了一切