媒体查询

媒体查询的顺序

向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围；
向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖。给出以下建议：

1、如果是判断最小值（min-width）,那么就应该从小到大写

@media(min-width:1400px) {
    /* 你的css样式 */
}
@media(min-width:1200px) {
    /* 你的css样式 */
}
@media(min-width:1000px) {
    /* 你的css样式 */
}

 2、如果是判断最大值（max-width）,那么就应该从大到小写

@media(max-width:1000px) {
    /* 你的css样式 */
}
@media(max-width:1200px) {
    /* 你的css样式 */
}
@media(max-width:1400px) {
    /* 你的css样式 */
}

媒体查询的基本方法

1、当屏幕的分辨率小于某值时，用（max-width）。例如：当屏幕分辨率小于1400px时，如下

@media(max-width:1400px) {
/* 你的css样式 */
};

2、当屏幕的分辨率大于某值时，用（min-width）。例如：当屏幕分辨率大于800px时，如下

@media(min-width:800px) {
/* 你的css样式 */
};

3、当屏幕分辨率在一个范围内时，例如：在800px和1400px之间，如下

@media screen and (min-width:1200px) and (max-width:1400px){
/* 你的css样式 */
}