响应式布局总结

什么是响应式布局？

简单来说就是：一套代码，兼容多个终端设备，能根据屏幕尺寸自动调整布局

响应式布局适用场景不多，适合数据报表、个人博客这种布局简洁大方的网站。能否采用响应式布局主要还是取决于设计稿，交互过于复杂的页面还不如分成PC和移动端两套代码。

要实现一个响应式布局，要考虑以下几点：

1. 设置viewport

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>

这段代码的作用是让页面自适应手机屏幕宽度，并且用户不能缩放

2. 移动端优先还是PC端优先？

   要实现页面根据屏幕尺寸自动调整布局，秘诀就是——CSS的媒体查询

   移动端优先

   移动端优先就是我们的样式以移动端为主，随着屏幕尺寸增大，后面的样式会覆盖前面的

   /* iphone6 7 8 */
   body {
       background-color: yellow;
   }
   /* iphone 5 */
   @media screen and (max-width: 320px) {
       body {
         background-color: red;
       }
   }
   /* iphoneX */
   @media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
       body {
         background-color: #0FF000;
       }
   }
   /* iphone6 7 8 plus */
   @media screen and (min-width: 414px) {
       body {
         background-color: blue;
       }
   }
   /* ipad */
   @media screen and (min-width: 768px) {
       body {
         background-color: green;
       }
   }
   /* ipad pro */
   @media screen and (min-width: 1024px) {
       body {
         background-color: #FF00FF;
       }
   }
   /* pc */
   @media screen and (min-width: 1100px) {
       body {
         background-color: black;
       }
   }
   

PC优先

和移动优先反过来，我们的样式以PC为主，随着屏幕尺寸变小，后面的样式覆盖前面的。

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

3. 字体自适应

   既然我们要实现响应式布局，那字体大小肯定也得随着屏幕变化而变化。我们的字体单位就不要用px了，改成rem。rem的大小取决于根元素html的font-size大小。通过媒体查询去设置不同设备下的字体大小就可以实现字体大小自适应，也可以通过js去动态设置，例如用flexible.js

4. 利用UI组件库

   现在的项目基本都会引入UI组件库，像Element、Ant design等，都实现了栅格布局。利用组件库的col、row组件，以及flex布局等，就可以快速实现响应式布局

   <el-row :gutter="12">
        <el-col :xs="24" :sm="12" :lg="12">
           <div class="chart-wrapper">
           </div>
         </el-col>
       
         <el-col :xs="24" :sm="12" :lg="12">
           <div class="chart-wrapper">
           </div>
         </el-col>
    </el-row>
   

综合以上几点，实现响应式布局要灵活使用各个方案，比如用rem做单位适配，布局使用flex、栅格系统适配不同屏幕宽度，必要时采用媒体查询编写不同设备下的样式。