<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
使用媒体查询
语法: @media 查询规则{}
媒体类型:
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
-可是使用逗号连接多个媒体类型
-可以在媒体类型前加上only,表示只有是指定媒体时,才会应用
only的使用主要是为了兼容老版本的浏览器
*/
/* @media print,screen{
body{
background-color: tomato;
}
} */
@media only screen{
body{
background-color: blue
}
}
</style>
</head>
<body>
<!--
响应式布局
-网页不可根据设备或窗口大小呈现出不同的效果
-使用响应式布局,可以是一个网页适应于所有的设备
-响应式布局的关键就是媒体查询
-通过媒体查询,可以为不同的设备,或设备不同状态来分别设置样式
-->
</body>
</html>
33.1.响应式布局——H5C3
最新推荐文章于 2023-10-25 11:19:57 发布