那么编写响应式布局的几种方法有：
1.首先大家应该认识midia这个单词吧，media呢在英文中就是媒体的意思，这是就有人问media有什么属性呢？它可以干什么呢？其实media呢有一个语句就是@media screen and(min-width:) (max-width);这个语句呢就是响应式布局的基础应用，给它赋予不同的值的话，它就可以在不同的屏幕上显示了，这样她就可以实现响应式布局的效果了，但是由于浏览器的兼容问题，它依旧存在的许多的毛病这怎么办呢？这时就涉及到了media的一些其它的属性了，总之一句话media还是很强大的，用它也可以实现响应式布局。
2.其次呢是响应式布局的另一种实现的方法以百分比的形式给宽度，这样的布局也可以实现响应式布局的效果随着屏幕的放大缩小布局也会跟着放大缩小的，这种布局的方法虽然可以实现响应式布局但是现在在我的的工作，或是公司中已经很少推荐使用这种布局的方式了，虽然说这种布局的方法简单，但同时它也存在着很大的问题已经跟不上时代的发展了，而且这样布局的代码量相对来说代码多、视觉不美观，这样在我们做项目的时候有很大的影响，所以尽管这种布局的方法是简单但是我们现在已经很少有公司去用这种的布局方法了。
3.最后呢还有一种方法也可以做响应式布局，那就是用bootstrap的栅栏，在最大屏幕就用col-lg-，在平板显示的话就适用col-sm-，在最小屏幕就适用col-xs-，在PC端显示的话就用的col-md-，在这个框架中，将一个容器分成了十二个格子，这种布局的方法也具有响应式布局的效果，栅格针对不同的设备设置了不同的样式，比如，在一个元素上使用了两个class，那么他会根据设备屏幕的大小来选择合适的样式，如果屏幕的大小不在类的范围内那么他就会忽略这两个类；而栅栏的每个样式都是在row的基础上进行，可以通过不同组合的类来达到在不同设备上显示的期望效果，但是呢这个布局是以做手机app为主的虽然说他也可以实现响应式布局的效果，但是我个人认为这种布局的框架不是很好，但是总体来说没有什么小毛病。
以上呢就是我个人对响应式布局的见解，这只是我自己的一些见解如果有什么不对的地方请大家多多指点，谢谢大家！
下载本文