H5如何做好移动端适配？

1 设置视口，做元信息配置

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2 设置媒体查询

@media(min-width = 750px) && (max-width = 1080px){
    body {
       font-size:18px
    }
}

3 弹性布局 flex布局

display:flex;
justify-content: center/space-around/space-between;
align-items: center;

4 图片响应式

<img srcset="example-small.jpg 500w, example-medium.jpg 1000w, example-large.jpg 1500w"
    sizes="(max-width: 600px) 500px, (max-width: 900px) 1000px, 1500px"
    src="example-large.jpg"
    alt="示例图片">

<picture>
 <source media="(max-width: 799px)" srcset="example-portrait.jpg">
 <source media="(min-width: 800px)" srcset="example-landscape.jpg">
 <img src="example-landscape.jpg" alt="示例图片">
</picture>

5 使用rem相对单位

html{
  font-size:1rem
}