如何使元素之间的边距在方向上相同？答案

【问题标题】：How to make the margin between element same on orientation?如何使元素之间的边距在方向上相同？
【发布时间】：2017-02-14 16:06:08
【问题描述】：

只要手机的方向是纵向的，主 div 和标题之间的边距就是 20 像素。我确实通过媒体查询进行了设置，例如：

@media only screen and (max-device-width: 760px) and (min-device-width: 320px){col-main{margin-top:20px;}}

我想这是纵向视图，因为它就像普通视图一样。然后我为横向视图添加了媒体查询：

@media only screen and (max-device-width: 760px) and (min-device-width: 320px) and (orientation : landscape){col-main{margin-top:40px;}}

每当我在移动浏览器中从纵向变为横向时都可以，但是当它从横向变为纵向时，margin-top:40px 仍在被读取，而不是 margin-top:20px。

我该怎么处理它？

【问题讨论】：

为什么 iOS 被标记？
试一试：@media all and (orientation:landscape) { /* Styles for Landscape screen */ } 可能是之前写的规则
@Mr.UB 因为它与 iOS 上的 safari 浏览器相同
@LukeRobertson 我只打算将它用于移动浏览器

【解决方案1】：

试试这个，

 @media only screen and (max-device-width: 760px) and (min-device-width: 320px) and (orientation: portrait)
    {col-main{margin-top:20px;}}

【讨论】：