移动端媒体查询和滑入菜单实践总结

1.HTML视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.媒体查询CSS文件分离

<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/default-media.css">

3.断点宽度设置

主流手机的视口宽度在450px以下，设置600px即可。

@media screen and (max-width: 600px) {
    //css
}

4.菜单和搜索按钮HTML设计

编写所有元素，采用display属性显示或隐藏元素。

5.搜索框和菜单编写注意事项

以jquery为例。

• 使用对移动端更加友好的touchstart事件，可以避免click事件的300ms延迟
• 应用animate动画，实现菜单滑入效果
• 搜索框获得焦点的代码需写在animate的回调函数中，避免异步执行的错误
• 针对用户重复快速点击按钮进行优化，使用if (!$('#media-menu').is(':animated')) {}进行判断，避免动画重复出现
• 菜单弹出后，禁止body层滚动，设置position:fixed和overflow:hidden
• 合理使用z-index，对body、top、menu、search四个层进行显示层级控制，全屏搜索框应该位于最上层
• 在弹出菜单层后点击搜索按钮时应关闭菜单显示，防止层干扰
• 测试：安卓QQ浏览器和微信使用率较高，但是其内核未直接使用Chromium，而是自研的X5内核，需充分测试

JS示例代码：

    /* 搜索 */
    $('#search_img').on('touchstart', function () {
        $('#media-menu').css('display', "none");
        $('#media-search').css('display', "block");
        $('#media-search').animate({
            right: '0px'
        }, 300,
            function () {
                //搜索框获得焦点
                $('#media-search-middle input').focus();
            });
    });

    $('#media-search-close').on('touchstart', function () {
        $('#media-search').animate({
            right: '-400px'
        }, 300);
        $('#media-search').fadeOut(300);

    });


    /* 菜单 */
    let flag = true;
    $('#top_menu_media').on('touchstart', function () {
        if (flag == true) {
            //动画执行判断，不在则执行
            if (!$('#media-menu').is(':animated')) {
                $("body").css("overflow","hidden");
                $('#media-menu').css('display', "block");
                $('#media-menu').animate({
                    right: '0px'
                }, 300);
                $(this).children("img").attr("src", "/images/close.svg");
                flag = false;
            }

        } else {
            if (!$('#media-menu').is(':animated')) {
                $("body").css("overflow","auto");
                $('.top').css('position', "fixed");
                $('.middle').css('padding-top', "60px");
                $('#media-menu').animate({
                    right: '-400px'
                }, 300);
                $('#media-menu').fadeOut(300);
                $(this).children("img").attr("src", "/images/menu.svg");
                flag = true;
            }
        }
    });