• 创建手机端可滑动效果


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

     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>

  • 相关阅读:
    对List 集合中元素进行排序
    webSocket 中使用 @Autowired 注入对应为null
    警告:添加非被动事件侦听器到滚动阻塞'touchstart'事件(Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event han)
    在webpack中使用monaco-editor
    vue下使用Monaco Editor
    前端开发Docker快速入门(二)制作镜像并创建容器
    微信开放平台-第三方平台代小程序实现业务
    微信开放平台-第三方平台授权流程及接口概述
    MyBatis实现动态排序方法
    IDEA中下载Git项目时输错密码的解决方法
  • 原文地址:https://www.cnblogs.com/lichaoloveliangying/p/6762589.html
Copyright © 2020-2023  润新知