创建手机端可滑动效果

 很多时候因为手机尺寸原因无法显示所有想显示的信息,可采用此方法解决(注:多数用于菜单按钮)

 ViewPort <meta>标记用于指定用户是否可以缩放Web页面

 ViewPort <meta>标记还表示文档针对移动设备进行了优化

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta charset="utf-8" />
    <title>布局</title>
    <style>
        html {
            320px;
        }

        body {
            320px;
        }

        #wrapper {
            position: fixed;
            top: 0;
            left: 0;
            100%;
            overflow: scroll;
        }

            #wrapper ul {
                padding: 0;
                1290px;
                height: 60px;
                font-size: 0;
            }

                #wrapper ul li {
                    display: inline-block;
                    95px;
                    height: 60px;
                    color: #fff;
                    font-size: 12px;
                    list-style-type: none;
                    background-color: red;
                }

                    #wrapper ul li.active {
                        background-color: blue;
                    }
    </style>


</head>
<body>

    <div id="wrapper">
        <ul class="j-nav">
            <li>导航1</li>
            <li>导航2</li>
            <li>导航3</li>
            <li>导航4</li>
            <li>导航5</li>
            <li class="j-spe">导航6</li>
            <li>导航7</li>
            <li>导航8</li>
            <li>导航9</li>
            <li>导航10</li>
            <li>导航11</li>
            <li>导航12</li>
            <li>导航13</li>
        </ul>
        <ul class="j-nav">
            <li>导航1</li>
            <li>导航2</li>
            <li>导航3</li>
            <li>导航4</li>
            <li>导航5</li>
            <li class="j-spe">导航6</li>
            <li>导航7</li>
            <li>导航8</li>
            <li>导航9</li>
            <li>导航10</li>
            <li>导航11</li>
            <li>导航12</li>
            <li>导航13</li>
        </ul>
    </div>

</body>
</html>

原文地址:https://www.cnblogs.com/lichaoloveliangying/p/6762589.html