CSS 移动端布局适配

手机屏幕的逻辑像素一般在320px～428px这个范围，手机页面最常见的布局就是水平均分排列和两栏布局。

Flex响应式布局，0适配

科学使用CSS布局，写出来的内容就是适配的。 缺点

1. 设计师一般只有一稿，导致在其他大小的屏幕上没有标准设计；
2. 某些屏幕上样式出现问题需要实际检测出来后再微调；
3. 对于一些非匀分排列和两栏布局的设计风格就无能为力了

等比缩放

屏幕布局、大小固定，在不同设备上进行缩放

 <meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >

// 需要在script写上适配的修改viewport的代码才行
 <script> const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width/WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if(!meta) {
        meta = document.createElement('meta')
        meta.setAttr