响应式开发的原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。//1.超小屏幕（手机）<768px；//2.小屏设备（平板）>=768px ~ <992px；//3.中等屏幕（桌面显示器）>=992px~<1200px；//4.宽屏设备（大桌面显示器）>=1200px；
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
响应式尺寸划分//1.超小屏幕（手机）<768px ：设置宽度为100%//2.小屏设备（平板）>=768px ~ <992px 设置宽度为750//3.中等屏幕（桌面显示器）>=992px~<1200px 设置宽度为970px//4.宽屏设备（大桌面显示器）>=1200px 设置宽度为1170px
<!DOCTYPE html><div lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container { height: 150px; background-color: pink; margin: 0 auto; } /* 1.超小屏幕下，<768 布局容器宽度为 100% */ @media screen and (max-width: 767px) { .container { width: 100%; } } /* 2.小屏幕下，>=768 <992px布局容器宽度为 750px */ @media screen and (min-width:768px) { .container { width: 750px; } } /* 3.中等屏幕下，992px 布局容器宽度为 970px */ @media screen and (min-width:992px) { .container { width: 970px; } } /* 4.中等屏幕下，>=1200px 布局容器宽度为 1170px */ @media screen and (min-width:1200px) { .container { width: 1170px; } } </style> </head> <body> <!-- 响应式开发首先需要一个布局容器 --> <div class="container"></div> </body></div>
