对于前端开发工程师来说，对于网页设计中，进行相应的布局，其布置的方式多种多样，对于不同的情况有不同的处理方法，但是很多设计师并不了解这些情况，接下来，小编带领大家了解网页布局设计五种方式。
一、静态布局
在传统的网页设计中，网页上所有元素的大小都是px。
1. 布局特征
无论浏览器的确切大小如何，页面的布局始终与第一次编写代码时相同。常规的PC站点是静态布局的，具有最小宽度，因此，如果宽度小于此值，则显示滚动条，如果宽度大于此值，则显示内容居中和背景。这种设计在PC上很常见。
2. 设计方法
PC:中心布局，所有样式使用绝对宽度/高度(px)，设计一个布局，在屏幕的宽度和高度已经调整，使用水平和垂直滚动条检查覆盖部分;
移动设备:建立一个单独的移动网站，设计一个单独的布局，并使用一个不同的域名，如wap。或者m。
优点:这种布局对设计师和CSS作者来说都是最简单的，并且没有兼容性问题。
缺点:很明显你不能改变用户的屏幕尺寸。目前，大多数门户网站、大多数企业PC广告网站都采用了这种布局。固定像素大小的web页面是匹配固定像素大小的显示的最简单方法。然而，这种方法不是一种完全兼容的方式来创建未来的web页面。我们需要一些方法来适应未知的设备。
二、流式布局
液体版面(也称为“流体”)的特点是页面元素的宽度根据屏幕分辨率进行调整，但总体版面不变。代表性围栏系统(网格系统)。
例如，将主网页正文的宽度设置为80%，最小宽度设置为960px。图像也被类似地处理(宽度：100%，最大宽度通常设置为图像本身的大小，以防止由于拉伸而失真)。
1.布局特征
当屏幕分辨率改变时，页面中元素的大小会改变，但布局不会改变。[如果屏幕太大或太小，这会导致元素显示不正确。
2.设计方法
宽度由百分比定义，高度主要由px确定。它可以根据视区和父元素的实时大小进行调整，以尽可能适应各种分辨率。为了避免对读数的影响过大或过小，我们经常使用max width/min width等属性来控制大小流范围。
在Web前端开发的早期历史中，这种布局方法被用于处理不同大小的PC屏幕(当时屏幕大小差异不会太大)。如今的手机开发也是一种常见的布局方式，但缺点是显而易见的：主要问题是如果屏幕尺寸跨度过大，就无法在屏幕上正常显示，与原来的设计相比，屏幕太小或太大。因为宽度是由百分比来定义的，但是高度和文本大小大多是由Px来确定的，大屏幕手机下的显示效果会变成一些页面元素的宽度拉得很长，但是高度和文本大小与原来一样(也就是说，这些东西不能“流化”)，而且显示很不一致
三、自适应布局
自适应布局的特点是为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以在不同的静态部分之间切换(页面元素的位置改变)，但在每个静态布局中，页面元素不会随着窗口大小的调整而改变。自适应布局可以看作是一系列静态布局。
1.布局特征
当屏幕分辨率改变时，页面中元素的位置将改变，但大小不会改变。
2.设计方法
使用@media media query为不同大小和介质的设备切换不同的样式。在良好的响应范围设计下，可以给自适应范围内的设备提供最佳的体验，实际布局固定在同一设备下。
四、响应式布局
随着CSS3媒体查询技术的出现，以及响应式设计的概念。响应式设计的目标是保证一个页面在CSS作者的所有终端(PC、手机、手表、冰箱web浏览器等)上都能显示出满意的结果，它的实现不局限于具体的方法，而是通常与流媒体布局+弹性布局相结合，再与媒体查询技术结合使用。–同时，在每种版式中，都应用了流式版式的概念，即页面元素的宽度随着窗口的调整而自动调整。也就是说，创建与屏幕分辨率范围相对应的多个流体布局。反应式布局可以看作是流程布局和自适应布局设计的结合。
响应几乎已经成为优秀页面布局的标准。
1.布局特征
在每个屏幕分辨率下都有一个布局样式，即元素的位置和大小会发生变化。
2.设计方法
媒体查询+流媒体布局。一般来说，@media query和grid system用于与布局的相对布局单位进行协调。实际上，通过CSS将不同的样式返回到单个web页面的不同设备上，是上述技术(如集成响应和流)的统称。
优点：适用于PC机和移动终端。如果足够耐心，效果是完美的。
缺点：(1)媒体查询有限，即只能枚举，只能适应主流的宽度和高度。(2) 要匹配足够的屏幕大小，工作量不小，而且设计还需要多个版本。
此代码将添加到响应页的页眉：
五、弹性布局
1. REM / EM的区别:REM与HTML元素的字体大小有关，而EM与其父元素有关。
2. 使用EM或REM单元进行相对布局比% %更灵活，并且可以支持浏览器字体大小调整和缩放的正常显示，因为EM是相对父元素的原因没有得到提升。[在制作网页时，中国网站习惯于使用CSS来定义字体大小，以确保每个人都能看到相同的效果。包括网易和搜狐在内的大多数网站都使用绝对像素单位。然而，如果你考虑网站的可用性，字体大小应该是可变的。一些视力不好的人需要放大字体才能清楚地看到页面内容。然而，ie主导了大部分浏览器市场，无法调整PX的字体大小。外国人非常重视网站的易用性，相当多的国外网站都使用了em作为字体单元。
3.这种类型的布局特点是使用EM /快速眼动的每个元素的大小单位包装的文字,虽然比例或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来定义大小的另一个优点是，它可以更好地适应字体单元的缩进/填充或在margin / browser中设置字体大小的情况(因为EM / REM会随着字体大小的变化而同步变化)。例如:P {text缩进:2em;}。
6. 使用快速眼动单元的灵活布局在移动端也很流行。
7. 事实上，在移动端使用所谓的弹性布局是相当勉强的。移动弹性布局之所以流行，是因为REM单元更适合调整页面中每个元素的大小(根据屏幕大小)和文本的大小。事实上，使用VW、VH等新兴单元可以实现完美的流量布局(高度和文字大小都可以是“流量”)，不再需要弹性布局。
今天，小编给大家详细介绍了在开发过程中使用的网页布局设计五种方法，特别是自适应和响应式布局。这两者没有什么不同。你需要在不同的情况下做出不同的解决方案，这也是你成为一名成熟的前端开发工程师最重要的技能。
来源：CSDN
作者：weixin_45140250
链接：https://blog.csdn.net/weixin_45140250/article/details/103667301