代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.nav
{
float:left;
width:100%;
height: 3rem;
background-color: darkgrey;
}
.nav ul li
{
float: left;
line-height: 3rem;
padding: 0 30px;
list-style: none;
/* background-color: blanchedalmond; */
}
.nav ul li a
{
text-decoration: none;
color:white
}
.nav ul li a:hover
{
color: black;
}
@media screen and (max-width:855px){
.nav ul li{
padding: 0 18px;
}
}
@media screen and (max-width:400px){
.nav ul li
{
padding: 0 5px;
}
}
</style>
<body>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">影视</a>
</li>
<li>
<a href="#">动漫</a>
</li>
<li>
<a href="#">短视频</a>
</li>
<li>
<a href="#">娱乐</a>
</li>
<li>
<a href="#">穿越火线</a>
</li>
<li>
<a href="#">安全讲座</a>
</li>
<li>
<a href="#">登录/注册</a>
</li>
</ul>
</div>
<script>
</script>
</body>
</html>
什么是媒体查询?
当设备屏幕宽度在320px——720px之间时，媒体查询中body的背景色（background-color:red）会重叠之前的body背景色，当设备屏幕宽度在320px以下时，媒体查询中body的body背景色
媒体,这种不用解释是啥东西吧,网页也是需要匹配自适应,也许开发中不需要全局匹配,但是可能是局部匹配.
常用mediatype
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕、平板、智能手机等
下面是语法操作
@media[mediatype][and|not|only]([mediafeature]){/*css code*/}
我写的就是and
其实可以判断在某某某尺寸之间进行匹配尺寸!
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
