响应式-菜单
title
meta是safari搞的
<meta content="width:device-width;initial-scale:1.0">
用两个样式表来写响应式布局，也就是要两套css来制作响应式布局
<link media="min-width=560px" href="decktop.css">
<link media="max-width=560px" href="mobile.css">
<!--这里的media最后我用@media直接写在.css文件中了，可能是浏览器的原因吧，不起作用，我用的chrome-->
menu
menu响应式经常用到，在decktop的时候时候就在左边，在mobile的时候就在上边并且可以隐藏
<label for="menu-box">菜单</label>
<checkbox id="menu-box"></checkbox>
<nav>
<a>选项1</a>
<a>选项2</a>
</nav>
用css的伪类 :checked 来做菜单的隐藏与现实
#checkbox{
display: none;
}
#checkbox:checked ~ nav{
display: none;
}
这样，在点击“菜单”的时候就能够显示和隐藏nav菜单了
遇到的问题
-
在自适应布局flex中，width不起作用怎么办？
把width改成min-width即可，如果要限定死，吧max-width也改成一样的就好了。
- 中 *media* 无效怎么办？
我把标签中的 media 直接去掉了，放到css文件中，用 @media(){ } 代替即可。
全部的代码
响应式-菜单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式菜单</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="mobile.css">
</head>
<body>
<header> 头部标题 </header>
<main>
<div id="nav">
<label for="menu-box">菜单</label>
<input id="menu-box" type="checkbox">
<nav>
<a href="#">选项一</a>
<a href="#">选项二</a>
</nav>
</div>
<div id="content">
this is content. this is content.
</div>
</main>
<footer> 尾部信息 </footer>
</body>
</html>
main.css
html,body{
padding: 0;
margin: 0;
border: 0;
}
header,footer{
text-align: center;
color: #fff;
background: #333;
}
#menu-box:checked ~ nav{
display: none;
}
#menu-box{
display: none;
}
main{
display: flex;
flex-direction: row;
justify-content: center;
}
#nav{
min-width: 5rem;
border-right: 1px solid #999;
}
nav>a{
display: block;
}
#content{
width: calc(100% - 5rem);
}
mobile.css
@media(max-width:600px){
main{
flex-direction: column;
}
#nav{
border: 0;
}
#nav>label{
position: absolute;
right: 0;
top: 0;
color: #fff;
}
nav>a{
text-align: center;
}
nav{
padding-bottom: 1rem;
}
}
效果如图
decktop 收缩菜单
decktop 展开菜单
moblie 收缩菜单
mobile 展开菜单
