Flex布局案例练习（二）- 自适应布局-CFANZ编程社区

Flex布局案例练习（二）- 自适应布局

Flex布局简单案例练习

一、自适应布局

不同的设备用不同的页面或局部伸缩

设计思路：判断设备的类型或控制局部的变化

1.1 页面跳转为例

index.html

    <script type="text/javascript">
        var redirect=()=>{
            // 获取设备信息
            let userAgent = navigator.userAgent.toLowerCase();
            // 正则表达式，判断设备类型
            let device =/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/;
            if(device.test(userAgent)) {
                // 跳转到移动端页面
                window.location.href="mobile.html";
            } else {
                // 跳转到PC端页面
                window.location.href="pc.html";
            }
        }
        redirect();
    </script>

pc.html

<body>
    PC端页面
</body>

mobile.html

<body>
    移动端页面
</body>

输入框输入index.html，若设备为PC端则页面会跳转到pc.html，若设备为移动端则会跳转到mobile.html

页面效果展示 - pc端

页面效果展示 - 移动端

1.2 改变移动端设备宽高为例

mobile.html

<body>
    <div class="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

    <style>
        .div0{
            display: flex;
        }
        .div0 div:nth-child(1){
            background-color: red;
            flex: 0 0 50px;
        }
        .div0 div:nth-child(2){
            background-color: skyblue;
            flex: 1 1 auto;
        }
        .div0 div:nth-child(3){
            background-color: red;
            flex: 0 0 50px;
        }
        @media (min-device-width: 400px) and (max-device-width: 500px){
            .div0 div:nth-child(2){
                background-color: yellow;
            }
        }
                
        @media (min-device-width: 501px) and (max-device-width: 600px){
            .div0 div:nth-child(2){
                background-color: orange;
            }
        }
    </style>

页面效果展示 - 移动端页面 300 × 300 - 中间颜色为skybule