媒体查询
AprilTong
# 媒体查询
媒体查询的应用:想要根据设备的大致类型或者特定的特征和设备参数(例如屏幕分辨率和浏览器视窗宽度)来修改网站或应用程序时。
# 媒体类型:
- all: 适用于所有设备
- print: 适用于在打印预览模式下在屏幕上查看的分页资料和文档
- screen: 用于屏幕
- speech: 用于语音合成器
# 定位媒体类型
@media print {
...;
}
1
2
3
2
3
# 定位媒体类型
/* 当浏览器的viewport 宽度等于或小于1250px的时候,此css才会应用样式*/
@media (max-width: 1250px) {
...;
}
1
2
3
4
2
3
4
# 创建复杂查询
使用逻辑运算符:not, and, only
/* 将样式限制为宽度至少为30em的横向的设备*/
@media (min-width: 30em) and (orientation: landscape) {
...;
}
1
2
3
4
2
3
4
# 测试多重查询
@media (min-height: 680px), screen and (orientation: portrait) {
...;
}
1
2
3
2
3
# 使用 not 否定一个特性
/*匹配没有悬停功能的设备*/
@media (not(hover)) {
...;
}
1
2
3
4
2
3
4
# 用 or 测试多个特性
/*测试多个功能之间的匹配,如果任何功能为true,解析为true,以下查询具有单色显示或悬停功能的设备*/
@media (not(color)) or (hover) {
}
1
2
3
2
3
# 使用媒体查询
# 在 html 中写入 media
在 html 头部添加以下代码,用来显示兼容移动设备的显示效果
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
1
- 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) {
}
1
2
3
2
3