search

wangduanduan / wangduanduan.github.io

Wubba Lubba dub-dub
https://wdd.js.org
27 stars 7 forks source link

一直不太明白的媒体查询 #279

Closed wangduanduan closed 5 years ago

wangduanduan commented 5 years ago

下面的媒体查询，当页面宽度是1024px ，body的背景色是什么？

可以理解only screen and (max-width: 500px)是一个条件判断，当这个条件为真时，应用样式。

如果页面宽度是1024px，显然这个宽度已经超出了max-width的范围，所以不会应用lightblue样式。

媒体查询的含义是，在某个范围内生效，是正向的逻辑。而不能理解为反向的逻辑。

<style>
body {
    background-color:pink;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
</style>

参考