css - 如何合并两个媒体查询？

Question

如何合并两个媒体查询？一种适用于较小的设备，一种适用于较大的设备，但仅限于纵向模式!

 @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape){
#div {margin-top: 20px;}
}

}
@media only screen 
and (min-device-width : 481px) 
and (max-device-width : 1024px) 
and (orientation : portrait){
{margin-top: 20px;}
}

Answer 1

不完全清楚你想组合什么，但基本上你用逗号分隔它们

例如

@media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) { ...