版权声明：本文为博主原创文章，遵循 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的屏幕
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}/* 设置顶部导航栏样式 */
.navbar {overflow: hidden;background-color: #222;}/* 设置 topnav 链接的样式 */
.navbar a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;}/* 悬停时改变颜色 */
.navbar a:hover {background-color: #ddd;color: black;}/* 在宽度为 600 像素或更小的屏幕*/
@media screen and (max-width: 600px) {.navbar a {float: none;width: 100%;}}
</style>
</head>
<body>
<h1>响应式导航菜单</h1>
<div class="navbar"><a href="#">主页</a><a href="#">关于</a><a href="#">联系我们</a></div>
</body>
</html>
创建弹性布局
可以窗口调试查看效果
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}/* 创建彼此相邻浮动的四个等列 */
.column {float: left;width: 25%;padding: 20px;}/* 清除列后的浮动 */
.row:after {content: "";display: table;clear: both;}/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {.column {width: 50%;}}/* 在宽度小于或等于 600px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
@media screen and (max-width: 600px) {.column {width: 100%;}}
</style>
</head>
<body>
<h1>响应式四列布局</h1>
<p><b>请调整浏览器窗口的大小以查看响应效果。</p>
<div class="row">
<div class="column" style="background-color:#aaa;"><h2>1</h2></div>
<div class="column" style="background-color:#bbb;"><h2>2</h2></div>
<div class="column" style="background-color:#ccc;"><h2> 3</h2></div>
<div class="column" style="background-color:#ddd;"><h2>4</h2></div>
</div>
</body>
</html>
