【前端布局规范与方案】前端常见的布局方案

前端常见的布局方案

1.静态布局(Static Layout)

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小，所有的内容以该容器为标准，超出宽高的部分用滚动条(将overflow置为scroll)来实现滚动查阅。

1.1 优点

采用 CSS2 之前的写法，不存在浏览器的兼容性问题，布局较为简单

1.2 缺点

移动端并不适配静态布局，所以需要重新设计布局并使用不同的域名

1.3 实现方式

最外层居中，使用固定的宽(高)度，超出部分用滚动条查阅。

例如，百度首页，外层的 body 设置了一个最小宽度 min-width: 1000px；

当页面不足以容纳其最小宽度时，底部就会出现 x 轴的滚动条，如下：

当然百度首页并不只是单纯的一个静态布局，其它模块也采用了其它布局方案。

而对于移动端，其并不适配静态布局，因此会设计另一个布局并使用另一个域名，比如百度的移动端首页为：m.baidu.com

再比如，京东的首页：


其PC端的外层容器设置了最小的宽度，若网页显示区域低于该值则会以最小宽度显示并出现滚动条。

而移动端则是限制了最大的宽度，若网页显示区域超过了该值，则以最大宽度显示并居中。

2.流式布局(百分比布局)

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表是栅栏系统（网格系统）。

2.1 流式布局常用的设计模板

左侧固定 + 右侧自适应的两栏布局。

左右固定宽度 + 中间自适应的三栏布局。

2.2 优点

元素的宽高用百分比(如：%、rem等)做单位，元素宽高按屏幕分辨率调整，布局不发生变化。

2.3 缺点

页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。 你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕跨度过大会导致元素无法正常显示。

因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

2.4 设计方法

具体来说，使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

3.弹性布局(Flex Layout)

…(见专栏)

4.自适应布局

自适应布局是指网页内容根据设备的不同而进行适应。

通过检测视口分辨率，来判断当前访问的设备是pc端、平板还是手机，从而请求服务层，返回专为该设备设计的页面。

需要根据不同使用场景开发多套界面。

4.1 原理

自适应布局的原理实际上是：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。

因此，其特点在于：

屏幕分辨率变化时，页面里面元素的位置会变化，而大小不会变化。

4.2 设计方法

使用媒体查询给不同尺寸和介质的设备切换不同的样式，在同一个设备下实际还是固定的布局。

5.响应式布局(Responsive layout)

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；

通过检测视口分辨率，针对不同客户端做代码处理，来展现不同的布局和内容；

只需要开发一套界面即可适用于所有尺寸及终端。

5.1 技术原理

响应式布局糅合了流式布局+弹性布局，再搭配媒体查询技术使用。

具体来说：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，使页面元素宽度随着窗口调整而自动适配。

即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

因此，响应式布局的特点是：每个屏幕分辨率下会有一个布局样式，即元素位置和大小都会变。

5.2 设计方法

媒体查询 + 流式布局

通常使用媒体查询和网格系统配合相对布局单位进行布局，实际上就是综合响应式、流动等技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

5.3 实现响应式布局的具体方法

1.媒体查询

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

@media screen and (max-width: 960px){
 body{
 	background-color:#FF6699
 }
}

@media screen and (max-width: 768px){
 body{
 	background-color:#00FF66;
 }
}

@media screen and (max-width: 550px){
 body{
 	background-color:#6633FF;
 }
}

@media screen and (max-width: 320px){
 body{
 	background-color:#FFFF00;
 }
}

上述的代码的效果就是，分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

但媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

2.rem

rem 单位是相对于html元素(即根元素)的字体大小。比如默认情况下，html元素的font-size为16px。所以此时1rem = 16px。

3.百分比%

…不推荐使用百分比实现响应式布局！

4.vw / vh

css3 中引入了一个新的单位 vw / vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。

任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一!

所以，其与百分比布局很相似，但更加好用。

5.flex弹性布局

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。

在父元素上，我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个属性分别从 主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。

在子元素上，我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从 项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。

6.自适应布局与响应式布局的区别

…