<!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>
/*
媒体特性：
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度 （视口大于指定宽度时生效）
max-width 视口的最大宽度 （视口小于指定宽度时生效）
and 表示且
， 表示或
not 表示非
*/
/*
样式切换的分界点，我们称之为断点，也就是网页的样式会在这个点时发生变化
一般比较常用的断点
小于768 超小屏 max-width=768px
大于768 小屏 min-width=768px
大于992 中屏 min-width=992px
大于1200 大屏幕 min-width=1200px
*/
@media (max-width: 400px){
body{
background-color: tomato;
}
}
@media only screen and (min-width: 500px) and (max-width: 700px){
body{
background-color: rgb(215, 255, 71);
}
}
</style>
</head>
<body>
</body>
</html>
33.2响应式布局-媒体查询——H5C3
最新推荐文章于 2024-07-12 14:38:32 发布
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
