流式布局与响应式布局

大家好，欢迎来到IT知识分享网。

常见的面试题会让你聊一聊流式布局与响应式布局，我还没遇到过直接问他俩区别的面试官，都是根据我的项目（里面有用到流式布局＋响应式布局）。

围绕这两点感觉网上大部分博客都长得差不多，那我就用自己粗浅的理解说一下由此展开的一点问题吧。

说起流式布局首先就要提到的是老掉牙的固定布局：浏览器大小不影响内部元素大小。

这不就是各大银行和国企的PO网站嘛 = = 无论屏幕多大网页都显示相同宽度。

在知乎上看到：在移动端开发中其实也可以采用固定布局（有两种方法） 点击打开链接

由此引入一个知识点viewport

用于移动端，用来设置页面的大小和缩放比例，没有为手机设计的网站，通常会使用桌面的宽度来渲染（通常是960px，980px），然后再改变字体的大小和对内容的缩放来使内容适应屏幕。然后你就要使劲拖拽页面 so bad

但如果设置一个简单的meta标签就可以解决这个烦人的问题：

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">

width=device-width：宽度等于当前设备宽（但会导致iphone、ipad横竖屏不分）

initial-scale=1.0：初始缩放值为1（会导致IE横竖屏不分）

这两条是为了互补，所以总是同时出现。

user-scalable=no：不允许客户手动缩放（不必须）

所以才会有这两种解决办法：

①在viewport meta标签上设置width=320（因为肾5的width是320），页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。

②设在viewport meta标签上设置content”width=640（手机宽度都是小于640的）,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。

接下来聊一聊流体布局

一个页面原本

如果我们拽浏览器减小窗口宽度，固体布局时会是这种效果

但流体布局，看出来有很大的不同了。

元素宽度并不是固定的，而是按照分辨率宽度进行调整，但是整体布局没有发生改变。

固定宽度布局使用的是像素，但是流体布局宽度使用的是百分比，但由于高度和文字大小神马还是使用的px所以会造成一旦两个分辨率差的有点大效果就差强人意。毕竟里面的文字是不会随着你窗口的减小跟着变小的（不然你让移动端用户眼要瞎死嘛）。这也是早期屏幕分辨率相差不大时最爱用的（有人能告知一下那是啥时代吗？）

插一波弹性布局：包裹文字的元素的尺寸采用em、rem做单位，而页面的划分区域还是百分数或px做单位。

在此处回顾下em和rem的区别：em是根据自己的font-size×em尺寸得到最终的像素值；rem指的根em，他统一随着html的font-size而不是元素本身的font-size，搭配媒体查询或js，动态改变html的font-size即可改变所有（而且咱们计算起来很容易）。

在此提到的媒体查询可以引出我们今天的重头：响应式布局

CSS3中的媒体查询，可以在不同分辨率下对元素重新设置样式（不只是尺寸），在不同屏幕下可以显示不同版式。

@media screen and (min-width:480px) 手机

@media screen and (min-width:768px) 平板

@media screen and (min-width:992px) 桌面显示器

@media screen and (min-width: 1200px){ 选择器{ 属性：值; } }  大于1200px时

这四个值是常用的，注意先后顺序，小的在前大的在后。