demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style type="text/css">
/* 媒体查询的基础语法 */
/* 设备的屏幕尺寸 大于 等于 480的时候 使用 括号内的样式
也遵循 层叠样式表的
为了避免样式覆盖
可以 修改 先后顺序
*/
/* 写的时候注意空格 */
@media screen and (min-width: 300px) { /* 300--480时,会使用该设置 */
body {
background-color: skyblue;
}
}
@media screen and (min-width: 480px) { /* 大于480时,会覆盖掉上面的设置 */
body {
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>