媒体查询让人头疼答案

【问题标题】：Media queries give a headache媒体查询让人头疼
【发布时间】：2018-04-03 03:20:27
【问题描述】：

我的主要智能手机是 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 的影响。

现在，我的问题是：

【问题讨论】：

我认为您可以尝试在媒体查询中使用height 属性，而不是方向。
对于您的其他问题，我说将适用于特定范围的公共属性与min 或max 媒体查询相结合，并在范围内结合，因此它不会应用于所有开始或结束大小点。
摆脱方向和按宽度定位。对于媒体查询，您始终必须确保覆盖所有宽度。在您的情况下，您的媒体查询在 740 处停止，您需要至少再做一次才能覆盖下一个范围（最有可能是台式机）。即使从大到小，你仍然需要覆盖所有范围
非常感谢您抽出宝贵时间。最后我设法自己修复了它.. 哈哈虽然你对transform: translateX(0px) 的修复在它开始时给了我一个奇怪的过渡，但使用transform: none 修复了它。不知道那里发生了什么。 Inca o data, apreciez ajutorul oberit!

【解决方案1】：

好的 CSS 是最少的。测试我的方法：

@media screen and (max-width:1200px){

}

@media screen and (max-width:992px){

}

@media screen and (max-width:640px){

}

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

【讨论】：

【解决方案2】：

你不需要包括方向，你可以简单地写@media only screen and (min-width: 740px)然后你申请两个，但是你应该有两个媒体查询来确保你都覆盖了
vh 和 vw 最适合创建响应式设计，但是如果您使用 IE 进行编码，则可能会出现问题，您需要找到计算高度的替代方法
李>
使用 Boostrap，它几乎可以为您完成一切

【讨论】：