HTML+CSS各类布局模式介绍，【面试宝典】

======================================================================================

即传统 Web 设计，网页上的所有元素的尺寸一律使用 px 作为单位。

• 布局特点

• 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

• 常规的 pc 的网站都是静态**（定宽度）布局的，也就是设置了 min-width**，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与 pc 端。

• 设计方法

• PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个 Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

• 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如 wap.或 m.。

移动端开发中采用静态布局的两种方式

• 在viewport meta标签上设置 width=320，页面的各个元素也采用 px 作为单位。通过用JS 动态修改标签的 initial-scale 使得页面等比缩放。

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

优点：这种布局方式对设计师和 CSS 编写者来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

当前，大部分门户网站、大部分企业的 PC 宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

流式布局（Liquid Layout）

======================================================================================

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

网页中主要的划分区域的尺寸使用百分数（搭配 min-*、max-*属性使用），例如，设置网页主体的宽度为 80%，min-width 为 960px。图片也作类似处理（width:100%, max-width 一般设定为图片本身的尺寸，防止被拉伸而失真）。

• 布局特点

• 屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】

• 设计方法

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

这种布局方式在 Web 前端开发的早期历史上，用来应对不同尺寸的 PC 屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用 px 来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

自适应布局（Adaptive Layout）

=========================================================================================

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

• 布局特点

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

• 设计方法

• 使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

响应式布局（Responsive Layout）

===========================================================================================

随着 CSS3 出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的 PC、手机、手表、冰箱的 Web 浏览器等等）都能显示出令人满意的效果，对 CSS 编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。

分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

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

• 布局特点

• 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

• 设计方法

• 媒体查询+流式布局。

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

优点：适应 pc 和移动端，如果足够耐心，效果完美

缺点：

（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。

（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

响应式页面在头部会加上这一段代码：

总结：

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的 css，而且 css 都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。

流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指 PC，平板，手机等设备之间较大的分辨率差异)。

如何实现响应式布局：折腾响应式布局设计，应运而生的 web 页面响应布局

弹性布局（rem/em 布局）

==================================================================================

参考：流布局与响应式网页设计有什么区别？

• rem,em 区别

• rem,em 都是顺应不同网页字体大小展现而产生的。其中，em 是相对其父元素，在实际应用中相对而言会带来很多不便；而rem 是始终相对于 html 大小，即页面根元素。

• 使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为 em 是相对父级元素的原因没有得到推广。

• 【中国站点制作网页的时候，习惯用 CSS 强制定义字体大小，保证每个人都看到一致的效果，包括网易、搜狐这些门户网站在内的大部分站点，用的都是绝对单位 px（像素）。但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的 IE 无法调整那些使用 px 作为单位的字体大小。国外人士非常重视网站的易用性，相当一部分外国站点已经使用 em 作为字体单位。】

• 这类布局的特点是：包裹文字的各元素的尺寸采用 em/rem 做单位，而页面的主要划分区域的尺寸仍使用百分数或 px 做单位（同「流式布局」或「静态/固定布局」）。

• 早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用 em/rem 做单位，可以使包裹文字的元素随着文字的缩放而缩放。

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

• 用 em/rem 定义尺寸的另一个好处是更能**适应缩进/以字体单位 padding 或 margin／**浏览器设置字体尺寸等情况（因为 em/rem 相对于字体大小，会同步改变）

• 例如：p{ text-indent: 2em; }

• 使用 rem 单位的弹性布局在移动端也很受欢迎。

• rem的定义

• font size of the root element，rem 是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。

• rem 与 em、px 的区别

• px：像素，比较精确的单位，但不好做响应式布局

• em：以父节点 font-size 大小为参考点，标准不统一，容易造成混乱
  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

项目、讲解视频，并且会持续更新！**

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。