媒体查询

媒体查询

媒体查询的应用：想要根据设备的大致类型或者特定的特征和设备参数(例如屏幕分辨率和浏览器视窗宽度)来修改网站或应用程序时。

媒体类型：

• all: 适用于所有设备
• print: 适用于在打印预览模式下在屏幕上查看的分页资料和文档
• screen: 用于屏幕
• speech： 用于语音合成器

定位媒体类型

@media print {
    ...;
}

定位媒体类型

/* 当浏览器的viewport 宽度等于或小于1250px的时候，此css才会应用样式*/
@media (max-width: 1250px) {
    ...;
}

创建复杂查询

使用逻辑运算符：not， and， only

/* 将样式限制为宽度至少为30em的横向的设备*/
@media (min-width: 30em) and (orientation: landscape) {
    ...;
}

测试多重查询

@media (min-height: 680px), screen and (orientation: portrait) {
    ...;
}

使用 not 否定一个特性

/*匹配没有悬停功能的设备*/
@media (not(hover)) {
    ...;
}

用 or 测试多个特性

/*测试多个功能之间的匹配，如果任何功能为true，解析为true，以下查询具有单色显示或悬停功能的设备*/
@media (not(color)) or (hover) {
}

使用媒体查询

在 html 中写入 media

在 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）
• mininum-scale = 1: 允许用户缩放到的最小比例（默认为 1）
• maximum-sacel = 1: 允许用户缩放到的最大比例(默认为 1)
• user-scalable = no: 用户是否可以手动缩放（默认为 no）

写包含 media 的 css 文件

/*当页面大于1200px时应用的样式*/
@media (min-width: 1200px) {
}