自适应布局-Web响应式布局入门到实战

当前位置:　首页>> 技术小册>> Web响应式布局入门到实战

**布局特点：**
- 不同设备对应不同的html
- 局部自适应

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

示例一：判断设备类型，跳转以对应的页面

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>

<body>

</body>
<script>

var redirect = () => {
        // 判断设备类型
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

// 根据设备类型跳转到不同的页面
        if (isMobile) {
            window.location.href = "mobile.html";
        } else {
            window.location.href = "pc.html";
        }
    }

redirect();

</script>

</html>
```

示例二：局部自适应，两侧固定不变，中间弹性伸缩

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mobile</title>
    <style>
        #div0 {
            display: flex;
        }

#div0 div:first-child {
            background-color: yellow;
            flex: 0 0 50px;
        }

#div0 div:nth-child(2) {
            background-color: red;
            flex: 1;
        }

#div0 div:nth-child(3) {
            background-color: yellow;
            flex: 0 0 50px;
        }

/* 配合媒体查询效果 */
        @media (min-device-width:400px) and (max-device-width:500px) {

#div0 div:nth-child(2) {
                background-color: blue;
                flex: 1;
            }
        }
    </style>
</head>

</body>

</html>
```

效果：

![](/uploads/images/20230421/f7d2513143b02cef123c6de265ee132f.png)

该分类下的相关小册推荐：

vue高级应用开发与构建

web前端面试完全指南

WebGL开发指南

uniapp快速入门与实战