中心现场照相的要求_网页不会布局？来告诉你5种你不可不知的WEB布局方式

作为一名前端开发工程师，布局的方法有很多，针对不同的情况有不同的处理方式，但是很多初学者并不清楚这些情况。那么今天我们就来聊一聊前端开发工程师必须要知道的5种布局方法！

1. 静态布局（ ）

也就是说，在传统的网页设计中，网页上所有元素的尺寸都是以px为单位的。

1.布局特点

无论浏览器大小如何，网页布局都是按照最初写代码时的布局来显示的。常规的PC网站都是静态（固定宽度）布局，也就是设置了min-width，这样如果宽度小于这个就会出现滚动条，如果大于这个宽度，内容居中，加上背景。这种设计在PC上很常见。

2.设计方法

PC端：居中布局，所有样式使用绝对宽高（px），并设计横竖滚动条，方便屏幕宽高调整时查看被遮挡部分；

移动设备：创建单独的移动网站，设计单独的布局，并使用不同的域名，如wap.或m。

优点：这种布局方式对于设计师和CSS编写者来说是最简单的，并且不存在兼容性问题。

缺点：很明显，它无法根据用户的屏幕尺寸进行不同的显示。目前大部分门户网站和大部分企业PC宣传站都采用这种布局。固定像素大小的网页是最简单的匹配固定像素大小显示器的方法。但是这种方法并不是完全兼容未来网页制作的方法。我们需要一些方法来适配未知的设备。

2. 流式布局（ ）

流体布局（也称“Fluid”）的特点是页面元素的宽度根据屏幕分辨率进行调整，但整体布局保持不变，代表作品有栅栏系统（网格系统）。

网页主要区域的尺寸以百分比表示（min-* 和 max-* 属性），例如网页主体的宽度设置为 80%，min-width 设置为 960px，图片的处理方式类似（width：100%，max-width 一般设置为图片本身的大小，防止因拉伸而变形）。

1. 布局特点

当屏幕分辨率改变时，页面上元素的大小会改变，但布局不会改变。这意味着如果屏幕太大或太小，元素将无法正常显示。

2.设计方法

宽度以%百分比定义，高度大多固定以px为单位，可根据可见区域（）及父元素实时大小进行调整，尽可能适应各种分辨率，常与max-width/min-width等属性结合控制尺寸流动范围，避免过大或过小影响阅读。

这种布局方式在Web前端开发早期为了应对不同尺寸的PC屏幕（当时屏幕尺寸相差不是太大）就曾使用过，在如今的移动端开发中依然是常见的布局方式，但是它有明显的缺点：最主要的问题就是如果屏幕尺寸跨度太大，在相对于原始设计过小或者过大的屏幕上都无法正常显示。因为宽度是以%百分比定义的，但是高度和文字大小大多是以px固定的，所以在大屏幕手机上的显示效果就会变成有些页面元素被拉伸得很长，但是高度和文字大小还和以前一样（也就是这些东西不能变成“流式”），显示非常不一致。

3.自适应布局（）

自适应布局的特点是针对不同的屏幕分辨率定义布局，即建立多个静态布局，每个布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态部分（页面元素的位置发生变化），但在每个静态布局中，页面元素不会随着窗口大小的调整而变化。自适应布局可以看作是一系列静态布局。

1.布局特点

当屏幕分辨率变化时，页面上元素的位置会改变但是大小不会改变。

2.设计方法

使用@media媒体查询可以为不同尺寸和媒体的设备切换不同的样式，通过优秀的响应式设计，可以给适配范围内的设备最好的体验，但布局其实是固定在同一台设备上的。

4. 响应式布局（ ）

随着CSS3中媒体查询技术的出现，响应式设计的概念也随之而来。响应式设计的目标是保证一个页面能够在所有终端（PC、手机、手表、冰箱等各种尺寸的网页浏览器）上都显示出满意的效果。对于CSS写手来说，实现方式并不局限于具体的方法，但通常是流式布局+弹性布局的组合，然后配合媒体查询技术——为不同的屏幕分辨率分别定义布局。同时，在每一个布局中，应用流式布局的概念，即页面元素的宽度随着窗口的调整而自动适应。即：创建多个流体布局，每个布局对应一个屏幕分辨率范围。响应式布局可以看作是流式布局和自适应布局设计理念的融合。

响应性几乎已经成为优秀页面布局的标准。

1. 布局特点

每个屏幕分辨率下都会有一种布局样式，即元素的位置和大小都会发生变化。

2.设计方法

媒体查询+流式布局。通常使用@media媒体查询和网格系统（Grid）配合相对布局单元进行布局。其实就是将响应式、流式等上述技术结合起来，通过CSS让单个网页在不同设备上返回不同样式的技术统称。

优点：适用于PC和移动端，只要有耐心，效果就很完美。

缺点： （1）媒体查询有局限性，即只能枚举，只能适配主流的宽度和高度。 （2）要匹配足够多的屏幕尺寸，工作量不小，还需要进行多版本的设计。

响应式页面会在中添加如下代码：

5. 灵活布局（rem/em布局）

1、rem与em区别：rem是相对于html元素的font-size而言的，而em是相对于其父元素而言的。

2、相对布局使用em或者rem单位。相对于%百分比，更灵活，可以支持浏览器字体大小调整、缩放的正常显示。但是由于em是相对于父元素的，所以一直没有得到推广。【中国网站做网页时，习惯用CSS强行定义字体大小，以保证大家看到的效果一致。包括网易、搜狐等门户网站在内的绝大多数网站，都使用绝对单位px（像素）。但是如果考虑网站的可用性，字体大小应该是可变的，有些视力不好的人，需要把字体放大才能看清楚页面内容。但是，占据大部分浏览器市场的IE，无法调整以px为单位的字体大小。外国人很重视网站的可用性，相当一部分国外网站已经使用em作为字体单位。

3、此类布局的特点是包裹文字的每个元素的尺寸以 em/rem 为单位，而页面主要划分区域的尺寸仍以百分比或 px 为单位（与“流式布局”或“静态/固定布局”相同）。早期的浏览器不支持整个页面按比例缩放，只支持网页内文字的尺寸放大，此时以 em/rem 为单位可以使包裹文字的元素随着文字的缩放而缩放。

4、浏览器默认字体高度一般为16px，也就是1em:16px，但是1:16的比例不方便计算。为了让单位em/rem更直观，CSS写手经常会把页面和节点字体设置为62.5%。比如选择用rem控制字体时，需要先设置根节点html的字体大小，因为浏览器默认字体大小为16px*62.5%=10px。这样1rem就是10px，方便计算。

5. 使用 em/rem 定义尺寸的另一个好处是，它更能适应缩进/字体单位或/浏览器字体大小设置（因为 em/rem 会随着字体大小同步变化）。例如：p{ text-: 2em; }。

6.使用 rem 单位的灵活布局在移动设备上也很流行。

7、其实在移动端上，大家还是比较不愿意使用所谓的弹性布局的，之所以在移动端上流行弹性布局，是因为rem单位更方便调整页面各个元素的大小和文字大小（根据屏幕大小）。其实使用vw、vh等后起之秀，就可以实现完美的流式布局（高度和文字大小都可以变成“流式”），弹性布局就没必要了。

综上所述

1、如果只在PC端工作，那么静态布局（固定宽度）是最好的选择；

2、如果你是做移动端，设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一个css+一个js调整font-size就可以了；

3、如果PC和移动端需要兼容，要求很高的话，那么响应式布局还是最好的选择，前提是根据不同的高度和宽度设计不同，响应式布局根据媒体查询设计不同。