响应式开发

响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕，看到不同的布局和样式变化

常见的响应式尺寸划分

• 超小屏幕（手机，小于768px）：设置宽度为100%
• 小屏幕（平板，大于等于768px）：设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px

• 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px

   .container {
       height: 300px;
       margin: 0 auto;
       background-color: red;
   }
   /* 超小屏幕下 小于768 布局容器宽度为100% */
   @media screen and (max-width: 767px) {
       .container {
           width: 100%;
       }
   }
   /* 小屏幕下 大于等于768 布局容器宽度为750px */
   @media screen and (min-width: 768px) {
       .container {
           width: 750px;
       }
   }
   /* 中等屏幕下 大于等于992px 布局容器宽度为970px */
   @media screen and (min-width: 992px) {
       .container {
           width: 970px;
       }
   }
   /* 大屏幕下 大于等于1200px 布局容器宽度为1170px */
   @media screen and (min-width: 1200px) {
       .container {
           width: 1170px;
       }
   }