响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

1. 媒体查询
   CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
   如何选择屏幕大小分割点
   如何确定媒体查询的分割点也是一个开发中会遇到的问题，
   选择600px,900px,1200px,1800px作为分割点、480px,800px,1400px,1400px
   上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。
   移动优先 OR PC优先
   不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width。
   媒体查询，设置在不同设备下的字体大小。
   2.图片响应式
   这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。
   1.使用max-width（图片自适应）:
   图片自适应意思就是图片能随着容器的大小进行缩放
   2.使用srcset
   3.使用background-image
   4.使用picture标签
   响应式布局包含的三个重要方面：
   1、媒体查询：是一种CSS语法。可以根据浏览器的特性，
   一般是屏幕或浏览器容器宽度提供CSS规则。
   2、流式布局：是使用em或者百分比等相对单位设定页面总体高度，
   让布局能够随屏幕大小而缩放。
   3、弹性图片：是使用相对单位确保图片再大也不会超过容器。
   、

直接看我写的响应式布局的代码：
这是js部分

下面是html部分

下面是css

最终效果：