这样一个问题请说说你知道的所有web布局方式？

一般来说，有以下这些布局方法：

1、浮动

float:left|right

2、inline-block

display:inline-block

3、flexible box

display:flex

4、grid

display:grid

5、绝对、相对定位

position:absolute|relative

6、表格

<table>

或

display:table

使用框架布局

bootstrap、Pure.css

有小伙伴就要说，这也太多了吧，我应该怎么选择？别急，下面我们就开始逐一分析各种方法在web自适应布局下的使用姿势，最后做个总结。

本文的所有例子使用了同一种三栏布局。

• 大尺寸 width > 1024px

• 中尺寸 768px < width < 1024px

• 小尺寸 width > 768px

1、浮动布局

float:left|right

最常用的布局方式之一，设置了 float 的元素脱离了文档流。需要注意在使用过浮动后，需要清除浮动，从而避免影响后面的非浮动元素。

HTML

普通的html布局，一个header，一个footer，中间是三栏式布局。

关键css

给中间的三栏都设上浮动。

清除浮动

元素的宽度都是百分比。因为没有内容高度给死了，日常应用时多用auto，让里面的内容撑开高度。

@media查询

当@media的查询条件满足时，应用{}中的样式。screen就是指电脑屏幕，还有print指打印页面。

中尺寸屏幕要把 right 挤下去，只要让 left 和 content 加起来等于100%，后面的东西就自动换行了。小尺寸用了css选择器，把所有 rwd-content- 开头的class宽度都设成100%。

2、inline-block

display:inline-block

HTML

html和浮动布局的一样，为了避免空白字符压缩（white space collapse）的问题，写法略有变化。

关键css

对我们这个布局，只是把float:left改成这两句。自适应的代码也和float一样，不重复贴了。

float VS.Inline-block

两者都是很常用的布局方式。

• 如果需要垂直居中，使用inline-block。

• inline-block有空白字符压缩的问题。

• 使用float，注意要清除浮动。

• 没有特别推荐用哪种，看个人习惯。

如何调整float或inline-block布局中元素的顺序？

比如我在小尺寸的时候，想把content放最上面，left和right都挤下去，怎么做呢？

float和inline-block布局没有纯css的方法，要用js把dom扣出来，往后面放，flexbox和grid布局都可以很好地解决这个问题。

3、flexible box

display:flex

HTML

html还是一样。

看css前先说说flex基础。

flexbox布局说白了就是点菜。先想好要吃什么，然后点必选菜，最后点可选菜，爱点不点。先想要吃什么，还是用之前的例子。header和footer不用管，需要布局一个这样的东西：

然后点必选菜，有下面几个必选菜要点：

1) flex-direction，选水平方向从左到右，选

flex-direction:row

2) flex-wrap，我们是单行布局，不要换行，选

flex-wrap: nowrap

3) justify-content，如果水平方向有空间，怎么分配，选

space-between

4) 垂直方向怎么布局，选

align-items: flex-start

5) align-content，多行布局怎么分配空间，我们是单行布局，不存在的

选好这5个之后，再加上display: flex;，往flex容器上一写，就完事了。可以偷懒的地方: 上面5种属性，第一个值是默认值，如果选了第一个，这个属性可以不用写。最后的可选菜比较常用的是可以调整flex子项(flex item)的顺序(order)，单独改变某个子项的布局等。

关键css

flex容器(container)属性如前文所说。

自适应布局时，设flex-wrap: wrap;，其他一样。

Flexbox VS Float/Inline-block

• 如果浏览器没问题，flexbox可以替代（或者替代大多数）float和inline-block。

• 相比float，flexbox解决了垂直居中的问题。

• 相比float/inline-block，flexbox多了垂直布局的方式，可以使容器中的内容等高，还可以改变内容的顺序。

• flexbox就像名字一样，非常灵活，同一种布局都可以用多种方式实现。

• flexbox的缺点是需要记的属性比较多，小部分浏览器支持不好。

4. grid布局

display:grid

HTML

grid的特点就是为所欲为，dom的顺序无所谓，只要放在grid容器下就可以。

看css之前还是先说说grid基础。一般grid有两种使用方式：

1) 网格项(grid item)起个名字，在网格容器（grid container）上定义好网格布局并且通过名字指定好所有网格项的位置。

2) 网格容器只定义布局，每个网格项在使用的时候，自行选择放到哪个(或哪几个)网格中。

不管哪种方式，只要会划线，你就掌握了grid布局。把想要的布局画出来，然后用线分割开。

横向1 ～ 7的黑线和纵向1) ～ 4)的红线都叫网格线。

网格线包围的一个或多块矩形区域叫网格区块。

第一种grid布局方式:

网格项(grid item)用grid-area属性起个名字。

网格容器(grid container)上三个主要属性要设置：

• grid-template-areas：就是一张地图，和我们划线分割的图布局一样，.表示空白。

• grid-template-rows: 设置行上的高度，不设置的话为auto。除了固定数字，百分比还有fr。

• grid-template-rows: repeat(3, 1fr)就是三等分的意思。

• grid-template-columns: 设置列的宽度。

自适应布局就是重画地图。

第二种grid布局方式:

网格容器上只要设置grid-template-rows和grid-template-columns。网格项在用的时候，自行设置需要放的地方。有很多种设置方式。

四个属性，分别是行、列的开始和结束。这边的序号指的是网格线，参照之前图中横向的黑色网格线和纵向的红色网格线。参照图，应该好理解。相当于:

简写成两个属性，<开始> / <结束>。

相当于:

span 3指的是经过了3个网格；如果网格项只跨越了1格，可以省略设置结束位置的网格线。

相当于:

网格线上左下右的顺序，不同于margin和padding的上右下左。

当然你可以别管这么多乱七八糟的，看我自适应布局:

Grid VS Flexbox

• flexbox是单方向的，横向或者纵向，grid是二维的。

• grid就是可以为所欲为，甚至和html的顺序没有关系，只要扔到grid容器里就可以。

• grid能做到flexbox做不到的事，反之亦然。如果浏览器支持，最好结合两者使用。

• grid适合布局大的骨架，flexbox适合布局局部。

• grid的最大缺点是浏览器支持不是很好。

• grid另一个缺点是，如果要往现有的布局里加一点或者删一点东西，基本就是重画了，其实也不算缺点，因为重画很快。

• grid不适合复杂的布局，因为网格线太多我头晕。

• grid小技巧，用chrome和firefox的调试工具查看grid容器可以看到网格，光看代码要疯。

5. 绝对、相对定位

position:absolute|relative

相当常用，特别是各种特效里都会用到。

对于自适应布局，就自己算top和left吧。

6. 表格

<table>或display:table

个人认为表格布局比较适用于表格(看上去是废话，但并不是)。如果是一般的页面布局，就不要用table了。

7. 使用框架布局

bootstrap、Pure.css

所谓万变不离其宗，用框架布局也是使用了上面所说的原理，这边就不再细说各种框架。

IE盒模型

推荐给所有元素加上border-box;

IE盒模型的宽度和高度包括了padding和border，这样对于百分比的布局比较好控制，不会出现加起来超过100%而换行的情况。

* 尽量不使用固定高度、宽度

在自适应的布局中少用或者不用固定的高度、宽度，使用百分比, auto或calc()。

* viewport

viewport主要用于手机自适应布局，因为现在手机分辨率越来越高，web上的1px到手机上未必就是1px，用这个meta让手机的px和web的px保持一致。

说到这里，看完的同学应该都明白了web自适应布局常见的套路。当碰到某个酷炫的自适应页面的时候至少不会说: 这个怎么实现的？还有这种操作？

最后总结一下:

自适应布局需要注意的事:

1. 使用IE盒模型box-sizing: border-box

2. 不要用固定宽高，使用百分比, auto或calc()

3. @media是自适应布局利器

4. 手机上要设置meta viewport

5. 关于各种布局的选择： 在浏览器支持的情况下，页面的大框架推荐用grid布局。定好架子后，局部布局推荐用flex。 float和inline-block浏览器支持好，但各有缺点。

那么有同学就要问，是不是只要学flex和grid就行了？对不起，所有都要学（就是这么可怕）。各种布局都有他们的使用场景。并且你也拦不住别人用，都需要看懂是吧。只能说要与时俱进，路漫漫其修远兮，吾将上下而求索。

参考资料

1. Flex布局教程 - http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2. A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3. CSS网格中基于线的定位 - https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid

4. 网格模板区域 - https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

5. Why not use tables for layout in HTML? - https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

6. Responsive table layout - http://allthingssmitty.com/2016/10/03/responsive-table-layout/

7. Using the viewport meta tag to control layout on mobile browsers - https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

8. Responsive Web Design - https://www.w3schools.com/css/css_rwd_intro.asp

9. Can I use - https://caniuse.com/

本文转载自互联网，如侵犯了你的权益，请立即联系告知，谢谢！

原文地址：

https://juejin.im/post/5a22d0086fb9a0451a7631ee

.背景介绍

如今人们经过手机阅读网页占了大多数，随着阅读方式的改动，网页完成多终端自适应，无论关于防止工程师无谓的反复劳动或者是项目管理的便利性上来说重要性都是非常巨大的。

2.知识剖析

由于挪动设备越来越多的被人们运用，手机成为访问互联网的最常见终端，而我们设计的网页确是为了呈如今PC端。

手机的屏幕比拟小，宽度通常在600像素以下，而PC的屏幕宽度，普通都在1000像素以上（目前主流宽度是1366×768），有的还到达了2000像素。同样的内容，要在大小悬殊的屏幕上，都呈现出称心的效果，并不是一件容易的事。

很多网站的处理办法，是为不同的设备提供不同的网页，比方特地提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比拟费事，同时要维护好几个版本，而且假如一个网站有多个portal（入口），会大大增加架构设计的复杂度。

自适应是为了解决如何在不同大小的设备上呈现同样的网页。

3.常见问题

如何进行自适应网页设计

4.解决方案

1. 在HTML头部增加viewport标签。

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

• 2、不使用绝对宽度

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

• 3、流动布局

流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

• 4、MediaQuery模块

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载a.css文件。

link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"

如果屏幕宽度在400像素到600像素之间，则加载b.css文件。

5.扩展思考

自适应与响应式的区别

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。但是无论怎样，他们主体的内容和布局是没有变的。

自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。

响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。

相比自适应网站，响应式网站省去了很多的控件，同时也省去了不少建立和维护的功夫。响应式布局就是一种流体，在按百分比缩放时也能相当的流畅。

使用响应式设计，你要记住所以的布局。这当然可能会使过程混乱，并且使设计更加复杂。这就意味着你应该专注于中等分辨率的视图，然后再用media querie调整为更低或更高的分辨率。 所以通常的做法是，在一个新的项目中使用响应式设计，在后期的改造中使用自适应设计。

自适应可用于改造现有的网站使其更好地适应移动端。这使你的设计可控制和开发多个特定的视图。你开发视图的数量完全取决于你，你的公司和全面的预算。然而，它也提供了一定量的控件（例如在内容和布局上），如此你便无须使用响应式设计。但当你设计多种分辨率时你会发现，在改变窗口大小的时候将会“跳出”布局。

自适应网站可以用于设计和开发一个拥有多个自适应视图的网站。所以这种设计通常用于改造网站。