移动web开发之媒体查询
Posted 清风园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动web开发之媒体查询相关的知识，希望对你有一定的参考价值。
媒体查询：针对不同的媒体类型定义不同的样式！
常见的媒体类型
1.screen:用于电脑屏幕，平板电脑，智能手机
2.speech:应用于屏幕阅读器等发声设备
3.all:用于所有设备
常见的媒体功能
1.max-width:定义输出设备中网页最大的可见区域宽度
2.min-width:定义输出设备中网页最小的可见区域宽度
3.max-height:定义输出设备中网页最大的可见区域高度
4.min-height:定义输出设备中网页最小的可见区域高度
用法案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */
</style>
</head>
<body>
</body>
</html>
以上是关于移动web开发之媒体查询的主要内容，如果未能解决你的问题，请参考以下文章