响应式布局的两种实现形式
一、总结
一句话总结：
一是用媒体查询实现，二是用bootstrap的栅格系统实现
二、响应式布局的两种实现形式
转自或参考：响应式布局的两种实现形式
https://www.cnblogs.com/luowen075/p/5907567.html
所谓的响应式布局，就是设计一个网站的时候，让它满足能同时适应不同的端口，而不用对不同端口设计不同的网页。
实现方式：采用百分比自适应布局
1.原生代码实现。
在国内目前设计网页的时候，一般会分成PC端和移动端两套页面，但在一定的情况下，必须满足只设计一个页面的情况下，满足不同端口都能正常使用，
因此会用用到自适应的方法。
用原生代码实现的根本在于媒体查询@media的设置。
@media screen 可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。
举例如下：
@media screen and (min-1000px){...} 对应PC端页面
@media screen and (max-1000px) and (min-768px) {...} 对应平板端页面
@media screen and (max-768px){...} 对应手机端页面
2.采用bootstrap框架布局
bootstrap框架布局完成的页面，是自动对应的自适应效果。
但是在书写的时候，应该严格按照bootstrap的书写规范，才不会出现怪异性问题。
写法举例：
<div class="col-md-6 col-sm-6 col-xs-12">
说明：最后的数字对应该div所占栅栏的列数。
col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。
col-sm-6 代表在平板上也显示div占当前行的一半。
col-xs-12 代表在手机端显示为当前行的百分之百填充。
3.还有其他方式，如JQuery和专门做响应式的JS文件，均能实现自适应效果，实现响应式布局。