个人对响应式布局的理解

从字面上理解，响应式布局即CSS布局随着屏幕尺寸的变换而变化。首先我们要搞清楚什么是固定布局，什么是流式布局。固定布局(Fixed Layout)使用固定宽度的包裹(Wrapper), 内部的各个部分可以使用百分比或者固定的宽度来表示. 这里最重要的是, 外面的所谓包裹层(或称为容器)的宽度是固定不变的, 所以不论访问者的浏览器是什么分辨率, 他们看到的网页宽度都彼此相同。流式布局(Fluid Layout 或 Liquid Layout), 主要使用百分比来设置各个部分的宽度, 用来适应不同的分辨率。对于网页中的某一部分元素(比如边界值, 侧边栏), 可以使用固定宽度, 但大部分元素是使用百分比来控制的。固定布局的宽度固定，不随浏览器窗口的大小变化，而流式布局的宽度会自动根据窗口的宽度进行调整，在Web设计人员中这是一个活跃的争论话题，许多人喜欢使用固定的网页宽度，因为这样可以在刻板的网格中精确地对齐页面元素，其他人则喜欢使用自动伸缩的网页宽度，让浏览者按自己的需要设置浏览器的宽度，网页自己也会相应地自动进行调整。固定布局和流式布局都有自己的明显优点，也有自己的潜在缺点，固定布局往往是一个更容易的选择，因为它从用CSS设计网站的复杂任务中又排除了一个不确定因素，但是使用固定布局时，如果浏览器窗口的宽度小于设计的宽度，则会出现讨厌的水平滚动条，如果而面宽度较窄的话，在较宽的窗口中显示时会浪费许多屏幕空间，流式而已会自动适用用户选择的窗口宽度，但在较宽的窗口中它会导致文本被拉伸为长长的一行，使页面内容难以阅读，而如果窗口非常窄的话，内容又会被压缩成窄窄的列，而且有些元素可能会彼此重叠。废话不多说，我说一下我对响应式布局的理解，它的优点是面对不同分辨率设备灵活性强，并且能够快捷解决多设备显示适应问题。下面我说一下实现响应式布局的几种方法，第一种，用百分比来定义尺寸；第二种，使用媒体对象，写法如下：@media (min-width:360px) and (max-width:1000px){} ，这句话表示当浏览器宽度最小为360px最大为1000px时执行以下布局；第三种，使用弹性盒子，即display:box,为了在多种浏览器上支持，box前要加-webkit-,-moz-,等前缀。还有一个办法--引用插件，例如Bootstrap,它的原生代码是通过媒体对象media写的。以上就是我对响应式布局的简单理解，不恰当的地方希望有大牛能指正出来，不甚感激。

转载于:https://www.cnblogs.com/SnowMonkey/p/5823712.html