媒体查询 为什么不管怎么设置，后面的都会覆盖前面的设置

Question

在index.less文件里最后有一行@import'media';在media.less文件里内容为@media (min-width: 768px) {    #content-wrapper {        margin-left: 200px;    }}我想达到 大于768px的设备margin-left: 200px; 小于768px的设备margin-left: 0px; 该怎么写呢？我试了在@media (min-width: 768px) {}前或后写@media (min-width: 320px) {}，不管设备是多大分辨率，后面的都会把前面的覆盖

Answer 1

怎么解决的？

Answer 2

@media=" only screen and (min-width:768px)"{
#content-wrapper {
        margin-left: 200px;
    }
}
@media=" only screen and (min-width:768px) and (max-width:320px)"{
#content-wrapper {
        margin-left: 0px;
    }
}