网页自适应问题，浏览器窗口缩小放大之后，导航不显示

，然后点击menu菜单会显示菜单，是这个图

，再点击menu之后菜单会隐藏，然后把浏览器窗口放大之后，原本应有的菜单就没了，就成这样了

，然后刷新才会出现菜单。还有一个问题，就是浏览器窗口缩小，点击menu，菜单显示出来，然后不点击menu让菜单隐藏，这时候放大浏览器窗口，原本有的菜单显示了，但是位置不对

，本来应该这样的

。这两个问题是怎么回事呢？

因为你menu菜单的位置是通过js动态获取窗口当前宽度设置的固定像素值。
js获取之后再改变览器窗口的大小后，这个值也不会变。

你可以让js把菜单的位置设置为百分比值，而不是固定的像素值。
或者让菜单的位置相对menu按钮定位，不需要通过js设置。
参考

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.menu {
    position: relative;
    width: 100px;
    height: 20px;
    float: right;
    margin-right: 50px;
}
.menubutton {
    width: 100px;
    height: 20px;
    border: 1px solid #999;
    text-align: center;
}
.menulist {
    position: absolute;
    width: 300px;
    height: 200px;
    right: 0;
    top: 25px;
    border: 1px solid #999;
    background-color: #99f;
    display: none;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".menubutton").click(function(event){
        $(".menulist").toggle();
    });
});
</script>
</head>
<body>
<div class="menu">
    <div class="menubutton">menu</div>
    <div class="menulist"></div>
</div>

</body>
</html>

当你使用@media这个属性的时候注意一个点
你在窗口变小的时候改变样式，你在窗口变大的时候也要写上原来的样式，不然还是之前小窗口的样式

这块用css媒体查询去写