版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qi_bai_jin/article/details/127178457?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522e37854aaabe435eb297786dc20318538%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=e37854aaabe435eb297786dc20318538&biz_id=0

复杂的媒体查询

与

为了混合媒体特征，实现复杂的媒体查询，我们可以用and来混合媒体类型和特征。例如，我们想要屏幕宽度至少为400px，且设备横放时变为蓝色，那么我们需要采用以下形式。

@media screen and (min-width: 400px) and (orientation: landscape) {body {color: blue;}}

或

如果我们想要屏幕宽度至少为400px，或者设备横放时都能采用一个css样式，我们可以使用或，比如：

@media screen and (min-width: 400px), screen and (orientation: landscape) {body {color: blue;}}

非

如果我们在某个媒体查询不想设置某个样式，我们可以采用not，比如以下，横屏的字体颜色将不会为蓝色。

@media not all and (orientation: landscape) {body {color: blue;}}

实例

响应式导航栏

用媒体查询制作导航栏，分别适配大屏幕与宽度小于600px的屏幕

永乐高(CHN)官方网站-World Class

响应式导航菜单

主页关于联系我们