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

Question

每当手机的方向为纵向时，主div和标题之间的边距为20px。我确实通过媒体查询设置了它，如：

@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。

我该怎么办？

Answer 1

试试这个，

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