1. 概念
- CSS媒体查询允许我们基于浏览器网站的设备的特性来应用不同的样式申明,不吐通过视口的宽度
- 操作方式
对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询中的CSS被应用,如果表达式结果为假,媒体查询中的CSS将被忽略 - 常用名词
① @media
以@media开头来表示这是一条媒体查询语句
紧跟在@media后面的是一个或者多个表达式,可以判别为真或假
② screen
在创建媒体查询时,必须以媒体类型(此处为screen)作为第一个表达式
相对应的有 : print(打印机)、braille(盲文)或者all(全部)等其他类型
③ and
and是一个关键字,表示有多个表达式,screen是第一个表达式,and后为另一个表达式
需前后表达式都为真时,整条查询结果才为真(也就是"且"的意思)
与and相对应的关键字有 : or、no等
④ (min-width:200px)
所有的表达式都应包含在括号内,除非它是只有一个单词的媒体类型表达式(如 : screen、print等)
前缀min-表示"至少",即"大于等于"的意思
前缀max-表示"至多",即"小于等于"的意思
⑤ {}
花括号里面的内容表示整条媒体查询结果为真实的CSS样式
尺寸变色 : 根据屏幕的尺寸改变背景颜色
- 宽度 < 500 红色
- 500 ≤ 宽度 ≤ 800 绿色
- 800 ≤ 宽度 ≤ 1000 蓝色
- 宽度 大于1000 紫色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*媒体查询*/
@media screen and (max-width: 500px){
body{
background-color: red;
}
#box{
font-size: 20px;
color: green;
}
}
@media screen and (min-width: 500px) and (max-width: 800px){
body{
background-color: green;
}
#box{
font-size: 40px;
color: red;
}
}
@media screen and (min-width: 800px) and (max-width: 1000px){
body{
background-color: blue;
}
#box{
font-size: 60px;
color: purple;
}
}
@media screen and (min-width: 1000px){
body{
background-color: purple;
}
#box{
font-size: 80px;
color: #fff;
}
}
</style>
</head>
<body>
<!--
要求
根据屏幕的尺寸改变背景颜色:
宽度 < 500 红色
宽度在 500 - 800 绿色
宽度在 800 - 1000 蓝色
宽度 >1000 紫色
-->
<div id="box">不断变色</div>
</body>
</html>
运行效果:
