目的
CSS中有一个叫做媒体查询(Media queries)的功能,这个功能可以让你查询当前运行网页的设备的一些信息,让你可以通过这些信息来调整网页的布局和样式等。常见的响应式布局通常就是利用这个功能来实现的。这篇文章将对相关的功能做个说明。
媒体查询
媒体查询的语法非常简单,大概就是下面的样子:
@media 查询条件 {
CSS-Code;
}
/* 查询条件可以是媒体类型或是媒体特性 */
/* 也可以是由and、not、only、or修饰组合而成的短语 */
/* 多个条件也可以用 ,(逗号)连接,相当于 or */
/* 媒体特性需要用圆括号包围 */
先看个简单的例子:
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 100%;
}
/* 页面可见区域宽高比大于等于2/1 */
@media (min-aspect-ratio: 2/1) {
body {
background-color: red;
}
}
/* 页面可见区域宽高比大于等于1/1 小于2/1 */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) {
body {
background-color: yellow;
}
}
/* 页面可见区域宽高比小于等于1/1 */
@media (max-aspect-ratio: 1/1) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
</body>
</html>
媒体查询中的媒体类型主要是下面一些:
值 | 描述 |
---|---|
all | 适用于所有设备,默认值 |
适用于在打印预览模式下在屏幕上查看的分页材料和文档 | |
screen | 主要用于电脑屏幕,平板电脑,智能手机等 |
speech | 主要用于屏幕阅读器等发声设备 |
媒体查询中的媒体特性非常多,这里列出一些常用的:
值 | 描述 |
---|---|
orientation | portrait:网页可见区域高度大于等于宽度 landscape:网页可见区域宽度大于高度 |
aspect-ratio | 网页可见区域宽高比 |
min-aspect-ratio | 网页可见区域最小宽高比 |
max-aspect-ratio | 网页可见区域最大宽高比 |
width | 网页可见区域宽度值 |
min-width | 网页可见区域最小宽度值 |
max-width | 网页可见区域最大宽度值 |
媒体查询使用时需要注意的是它是CSS的内容,后面的规则会覆盖前面的规则,所以书写的顺序还是需要注意的,不然有可能会出现问题,比如下面例子:
媒体查询语法上来说使用比较简单,更多内容可以参考下面链接:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
响应式布局
响应式布局主要是为了让网页在不同显示设备上以合适的方式显示而出现的一种设计思路。通常来说电脑的显示屏较大,大多都是横屏显示的;手机的显示屏比较小,通常都是竖屏使用的。如果只有一套UI显示的话体验上往往难以兼顾两者,这时候就可以使用响应式布局了。对于小型的网页项目来说目前常见的响应式布局通常就是利用 媒体查询
结合 meta标签的viewport属性
来实现的,下面是个简单的例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 浏览器需要下面一行才能正确响应响应式布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-wrap: wrap;
}
.header {
width: 100%;
height: 10%;
background-color: salmon;
}
.nav {
background-color: lightgreen;
}
.main {
background-color: mediumturquoise;
}
.footer {
width: 100%;
height: 10%;
background-color: orchid;
}
/* 在页面较宽时 */
@media (min-width: 576px) {
.nav {
width: 20%;
height: 80%;
}
.main {
width: 80%;
height: 80%;
}
}
/* 在页面较窄时 */
/* 手机竖着拿的时候页面的CSS像素宽度大多小于576px */
@media (max-width: 575px) {
.nav {
width: 100%;
height: 10%;
}
.main {
width: 100%;
height: 70%;
}
}
</style>
</head>
<body>
<div class="header"> 标题栏 </div>
<div class="nav"> 导航栏 </div>
<div class="main"> 正文 </div>
<div class="footer"> 页脚 </div>
</body>
</html>
总结
媒体查询和响应式布局总体来说是比较简单的,基本上就上面这些内容了,更多的还是要结合实际业务来应用。