lanyu9 2021-09-18 18:07 采纳率: 50%
浏览 58
已结题

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

我用@media写了网页自适应的代码，浏览器窗口变小后，是这样的

img

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

img

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

img

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

img

，本来应该这样的

img

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

  • 写回答

3条回答 默认 最新

  • CSDN专家-天际的海浪 2021-09-18 18:22
    关注

    因为你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>
    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 11月23日
  • 创建了问题 9月18日