【干货】一文详解前端布局

一、🔴自适应布局

在前端布局中，自适应指的是网页或应用程序能够根据不同设备的屏幕尺寸和分辨率，自动调整和适应布局，以确保内容在不同设备上的显示效果良好。通过使用自适应布局，可以使网页或应用程序在桌面电脑、平板电脑、手机等不同设备上都能够以最佳的方式呈现，提供更好的用户体验。常见的自适应布局技术包括使用百分比、弹性盒子布局（Flexbox）和媒体查询（Media Queries）等。

1. 使用flex布局
2. 使用百分比
3. 避免写死宽高
4. 添加滚动条
5. 使用rem

常见的自适应布局技术：

自适应布局技术是指网页或应用程序能够根据不同设备的屏幕尺寸和分辨率，自动调整布局和显示效果，以适应不同的设备和屏幕大小。以下是一些常见的自适应布局技术：

1. 媒体查询（Media Queries）：通过CSS中的媒体查询，根据不同的屏幕尺寸和分辨率，应用不同的样式规则。

2. 弹性网格布局（Flexible Grid Layout）：使用相对单位（如百分比）来定义网格布局，使得网页元素能够根据屏幕尺寸自动调整大小和位置。

3. 弹性图片（Flexible Images）：使用CSS中的max-width属性来确保图片在不同屏幕尺寸下能够自适应调整大小。

4. 响应式字体（Responsive Typography）：使用相对单位和媒体查询来调整字体大小和行高，以适应不同屏幕尺寸。

5. 视口（Viewport）：通过设置视口的宽度和缩放比例，控制网页在移动设备上的显示效果。

6. CSS网格布局（CSS Grid Layout）：使用CSS中的网格布局属性，以灵活的方式定义网页的布局，适应不同屏幕尺寸。

7. Flexbox布局（Flexbox Layout）：使用CSS中的Flexbox布局属性，实现灵活的盒模型布局，适应不同屏幕尺寸。

二、🟡响应式布局

响应式布局是一种网页设计的方法，它可以根据用户设备的屏幕大小和分辨率，自动调整网页的布局和元素的大小，以适应不同的屏幕尺寸。这样可以提供更好的用户体验，无论用户是在电脑、平板还是手机上访问网页，都能够获得良好的浏览效果。

响应式布局的实现通常使用CSS媒体查询和弹性布局等技术。通过设置不同的CSS样式规则，可以根据屏幕尺寸的变化，改变网页的布局、字体大小、图片大小等元素的样式，从而适应不同的设备。

响应式布局的优点是可以提高网页的可访问性和可用性，减少用户的缩放和滚动操作，提升用户体验。同时，响应式布局也有助于提高网页的搜索引擎优化，因为搜索引擎更倾向于优先显示适应不同设备的网页。

响应式布局是一种适应多种设备的网页设计方法，可以提供更好的用户体验和搜索引擎优化，是现代网页设计的重要技术之一。

响应式布局是一种网页设计的方法，可以根据用户设备的屏幕大小和分辨率，自动调整网页的布局和元素的大小，以提供更好的用户体验。它可以适应不同的设备，如桌面电脑、平板电脑和手机等。

在响应式布局中，通常使用CSS媒体查询来根据不同的屏幕尺寸应用不同的样式。通过设置不同的CSS规则，可以调整元素的大小、位置和显示方式，以适应不同的屏幕。

常见的响应式布局技术包括：

1. 弹性网格布局：使用相对单位（如百分比）来定义网格的列数和宽度，使得网格可以根据屏幕大小自动调整。

2. 媒体查询：使用CSS的@media规则，根据不同的屏幕尺寸应用不同的样式。

3. 图片自适应：使用CSS的max-width属性，使得图片可以根据容器的大小自动调整。

4. 隐藏和显示：使用CSS的display属性，根据屏幕大小隐藏或显示某些元素。

5. 字体自适应：使用CSS的rem单位，根据屏幕大小调整字体大小。

通过这些技术，响应式布局可以实现在不同设备上提供一致的用户体验，并且减少了开发和维护多个不同版本的网页的工作量。

三、🟢详细介绍

1、百分比布局

百分比布局是一种常用的前端布局方式，它可以根据父元素的宽度或高度来设置子元素的尺寸。通过使用百分比单位，可以实现响应式布局，使页面在不同设备上都能适应不同的屏幕尺寸。

在百分比布局中，可以使用百分比来设置元素的宽度、高度、边距、内边距等属性。例如，可以将一个元素的宽度设置为父元素宽度的50%，这样无论父元素的宽度是多少，该元素都会占据父元素宽度的一半。

百分比布局的优点是灵活性高，可以根据不同的需求和屏幕尺寸进行调整。但也需要注意一些限制，-例如在使用百分比布局时，需要确保父元素有明确的宽度或高度，否则百分比值无法生效 。

百分比布局是一种常用的前端布局方式，可以实现响应式设计，适应不同的屏幕尺寸。在实际开发中，可以根据具体需求和设计要求，合理运用百分比布局来实现页面的布局效果。

窗口的hight和width改变的时候，通过给 height、width 、padding、border、margin等 属性都是依托父组件的宽高（margin 和 padding 都可以使用百分比值的形式，但有一点可能和通常的想法不同，就是 margin-top、margin-bottom、padding-top、padding-bottom的百分比值参照的不是容器的高度，而是父级容器的宽度）

2、flex弹性布局

Flex布局是一种弹性盒子布局模型，可以方便地实现页面的自适应布局。在前端开发中，使用Flex布局可以轻松地控制元素的排列方式、对齐方式和间距等。

Flex布局的基本概念包括容器和项目。容器是指设置了display: flex属性的父元素，而项目则是容器中的子元素。通过设置容器的属性，可以控制项目的排列方式和对齐方式。

常用的Flex布局属性包括：

• flex-direction：控制项目的排列方向，可以是水平方向（row）、水平方向反转（row-reverse）、垂直方向（column）或垂直方向反转（column-reverse）。
• justify-content：控制项目在主轴上的对齐方式，可以是居左（flex-start）、居中（center）、居右（flex-end）、两端对齐（space-between）或等间距对齐（space-around）。
• align-items：控制项目在交叉轴上的对齐方式，可以是居上（flex-start）、居中（center）、居下（flex-end）或拉伸填充（stretch）。
• flex-wrap：控制项目是否换行，可以是不换行（nowrap）、换行（wrap）或换行反转（wrap-reverse）。
• align-content：控制多行项目在交叉轴上的对齐方式，可以是居上（flex-start）、居中（center）、居下（flex-end）、两端对齐（space-between）或等间距对齐（space-around）。-

举例：实现垂直居中效果

常用方法：

display: flex;
align-items: center;
justify-content: center;

另一个新的用法：

display: grid;
place-items: center;

place-items 属性是以下属性的简写：align-items、justify-items。
这样当粘贴图片时，图片就居中显示了。

举例：实现平均分布两端对齐不换行效果

  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  width: 100%;
  white-space: nowrap;

推荐给大家一个好用的：学习flex布局的游戏网站

3、媒体查询布局

媒体查询布局是一种在前端开发中常用的技术，用于根据设备的屏幕尺寸和特性来调整网页的布局和样式。通过媒体查询，可以实现响应式设计，使网页在不同设备上都能够呈现最佳的用户体验。

在媒体查询布局中，我们可以使用CSS的@media规则来定义不同的样式规则。通过指定不同的媒体查询条件，我们可以针对不同的设备尺寸和特性来应用不同的样式。

例如，我们可以使用媒体查询来定义在小屏幕设备上的布局样式：

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时应用的样式 */
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
  }
  /* 其他样式规则... */
}

上述代码中，我们使用@media规则和max-width条件来指定在屏幕宽度小于等于768px时应用的样式。在这个样式规则中，我们将body的字体大小设置为14px，将.container的宽度设置为100%。

通过媒体查询布局，我们可以根据不同设备的屏幕尺寸和特性来灵活地调整网页的布局和样式，以提供更好的用户体验。

4、rem响应式布局

5、vw、vh响应式布局

四、🟣em/px/rem/vh/vw 这些单位有什么区别？

一、介绍
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性

从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位

利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等
二、单位
在css单位中，可以分为长度单位、绝对单位，如下所示
相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、%
绝对长度单位 cm、mm、in、px、pt、pc
这里我们主要讲述px、em、rem、vh、vw
px
px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中
em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）

为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为
16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了

特点：

em 的值并不是固定的 em 会继承父级元素的字体大小 em
是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
任意浏览器的默认字体高都是 16px

有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定

这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关
rem
rem，相对单位，相对的只是HTML根元素font-size的值

同理，如果想要简化font-size的转化，我们可以在根元素html中加入font-size: 62.5%

html html {font-size: 62.5%; } /* 公式16px*62.5%=10px */

这样页面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得视觉、使用、书写都得到了极大的帮助

特点：

rem单位可谓集相对大小和绝对大小的优点于一身 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸
vh、vw
vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw
始终是针对窗口的宽），同理，vh则为窗口的高度

这里的窗口分成几种情况：

在桌面端，指的是浏览器的可视区域 移动端指的就是布局视口 像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

对于普通定位元素就是我们理解的父元素

对于position: absolute;的元素是相对于已定位的父元素 对于position: fixed;的元素是相对于
ViewPort（可视窗口） 三、总结 px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单
三、总结
px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

参考文档：css参考手册
参考文章：前端布局

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~