响应式布局的见解

　　　　对于响应式布局呢，我相信每个人都有自己不同的见解，有的呢认为响应式布局就是一种网页，但是我们真正的响应式布局是可以随网页的大小，从而自己调节的一种网页，在PC端的时候网页上的所有的东西都呈一排显示，或者是分为有两个侧栏，或一个侧栏，还有主题内容组成的，在PC端的时候是整体一排显示的，但是随着屏幕的缩小布局会变小在手机端的话，可能原来竖着排的按钮就会横排过来.....

　　　　那么编写响应式布局的几种方法有：

　　　　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为主的虽然说他也可以实现响应式布局的效果，但是我个人认为这种布局的框架不是很好，但是总体来说没有什么小毛病。

　　　　以上呢就是我个人对响应式布局的见解，这只是我自己的一些见解如果有什么不对的地方请大家多多指点，谢谢大家！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有