布局特点：
- 不同设备对应不同的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><div id="div0"><div>1</div><div>2</div><div>3</div></div></body></html>
效果：
