响应式 Web 设计 - 媒体查询

1.CSS3 @media 查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

2.逻辑操作符

你可以使用逻辑操作符，包括not、and和only等，构建复杂的媒体查询。

• and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真
• not操作符用来对一条媒体查询的结果进行取反。
• only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符，必须明确指定一个媒体类型。
• 你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。

2.1 and

如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性：

 @media tv and (min-width: 700px) and (orientation: landscape) { ... }

上面媒体查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。

3.媒体特征

大多数媒体属性可以带有“min-”或“max-”前缀，用于表达“最低...”或者“最高...”

颜色（color）

颜色索引（color-index）

宽高比（aspect-ratio）

设备宽高比（device-aspect-ratio）

设备高度（device-height）

设备宽度（device-width）

网格（grid）

黑白（monochrome）

方向：横屏/竖屏

对于像ipad来说，可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

orientation：portrait | landscape

如果是横屏背景将是浅蓝色：

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

4.开始在html中写入Media

1.在html头部添加以下代码，用来显示兼容移动设备的显示效果

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

参数详解：
❀。width=device-width ：宽度等于当前设备的宽度
❀。initial-scale=1 ：初始的缩放比例。（默认为1）
❀。minimum-scale=1 ：允许用户缩放到的最小比例。（默认为1）
❀。maximum-scale=1 ：允许用户缩放到的最大比例。（默认为1）
❀。user-scalable=no ：用户是否可以手动缩放（默认为no）

2.引入包含Media的css文件

❤一般情况html和css代码都是分开写的，media也不例外

<link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/>
<link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>

3.写Media中的代码

/*媒体查询*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {
    
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
    #adver .center {
        width: 50%;
        margin: -10px 0 0 -25%;
    }
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
    #adver .center {
        width: 60%;
        margin: -10px 0 0 -30%;
    }

}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
    header, header .center, header .link {
        height: 45px;
    }
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
    header, header .center, header .link {
        height: 45px;
    }
}

5.媒体查询断点

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

 

参考内容：
1.作者：洞听
链接：https://www.jianshu.com/p/eb1123d5b20b
来源：简书

2.https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries