开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情
文章概览
- 媒体查询
- 响应式布局
- 媒体特性
媒体查询
首先了解一下媒体的类型：
媒体类型
-
speech：屏幕阅读器
-
print：打印设备
-
all：所有设备
-
screen：带屏幕的设备
连接媒体时只可以选择一种吗？当然不是，连接的媒体可以是多个，他们之间是或的关系；另外，可以在媒体类型前面加一个only，表示只有。因为一些新属性不能再老版本浏览器上解析，因此需要用到only，即only的作用是兼容老版本浏览器。
响应式布局
- 根据不同设备或者窗口大小，响应式布局可以使其呈现不同的效果。
- 响应式布局可以让一个网页适用于所有设备。
- 媒体查询作为响应布局的关键点。
- 为了使不同设备或设备不同状态分别设置样式可以使用媒体查询。
媒体特性
- width：视图的宽度
- height：视图的高度
- min-width：视图的最小宽度，视图大于指定宽度时才会生效。
- max-width：视图的最大宽度，视图小于指定的宽度时才会生效。
断点：样式切换的分界点，也就是网页的样式会在这个点发生变化。
常用的断点
- 小于768 超小屏幕 max-width=768px。
- 大于769 小屏幕 min-width=768px。
- 大于992 中型屏幕 min-width=992px。
- 大于1200 大屏幕 min-width=1200px。
代码示例
<!-- 同一个样式，多次应用到同一个元素 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 30px;
}
.box {
background-color: red;
}
div {
background-color: green !important;
}
</style>
</head>
<body>
<div class="box" style="background-color: blue;">123</div>
</body>
</html>
如果需要体验比显示器更大的断点，可以在chrome开发工具里使用responsive模式，选择任何尺寸。
