前端响应式布局方式及其优缺点大全

1. 什么是响应式布局

对于不同宽度和高度的屏幕，通过一套代码使页面样式根据屏幕尺寸自适应展示。，目的是解决移动互联网浏览的问题，使网站能够在多种终端上（如智能手机、平板电脑和台式电脑）提供最佳的浏览体验。

2. 响应式布局方式有哪些

1. 媒体查询布局

• 实现方案

  通过@media 媒体查询，可以给不同尺寸的屏幕，编写不同的样式来实现响应式布局。简单的来说：告诉浏览器或者其他运行环境，满足a条件时，a样式生效；满足b条件时，b样式生效

• 可监听的属性

  1. 屏幕的高度（vh）和宽度（vw）
  2. 设备的高度与高度
  3. 设备方向（比如手机的竖屏和横屏）
  4. 分辨率（resolution）等等

• 使用方法
  • 在css中使用：

    	@media not|only mediatype and (mediafeature and|or|not mediafeature{
    			// 自定义样式
    	}
    

  • 在html中使用

    	<!-- 宽度大于 900px 的屏幕使用该样式 -->
    	<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
    	<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
    	<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
    

• 优缺点

  • 优点:
    • 原生支持，无需插件：@media 规则可以直接在 CSS 中使用。
    • 使用简单：只需在CSS中添加@media screen属性，就可以开始定义不同屏幕尺寸下的样式规则。
  • 缺点:
    • 若浏览器大小改变，需要改变的样式太多，多套样式代码会很繁琐。

2. Flex弹性布局

• 定义

  Flex布局是一种用于构建灵活和响应式用户界面的布局模型。它由Flexbox CSS 模块提供支持，并允许在容器中对齐和分布子元素。

• 简单使用示例（Flex的使用及理解详解）
  • 父元素设置 display:flex;
  • 子元素设置 flex：1; // 表示子元素的伸缩比例，默认为 1 。
• 优缺点

  • 优点：
    • 使用简单性：Flexbox是CSS规范的一部分，是现代浏览器支持的标准功能。
    • 对齐容易：Flexbox提供了一套完整的对齐工具，可以快速对齐子项。
  • 缺点：
    • 存在兼容性问题，有些浏览器可能不支持，需要做兼容性处理。

3. 百分比布局

• 定义

  当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

• 百分比实现规则

  1. height、width 属性的百分比依托于父标签的宽高。
  2. 子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。
  3. 子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。
  4. border-radius 为百分比，则是相对于自身的宽度

• 优缺点

  • 优点:
    自适应性强：使用百分比设置元素的宽度，可以使布局在不同尺寸的屏幕上自适应调整，提供良好的响应式设计体验
  • 缺点:
    计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

4. vw/vh响应式布局

• vw/vh定义

  vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。100vw = 视图窗宽度 ，100vh = 100 视图窗高度，实际开发中可利用 vscode 的插件 px to vw 来实现单位的自动转换。

• 优缺点

  • 优点
    • 视口单位不依赖父元素的尺寸，可以独立控制元素的大小和位置
  • 缺点
    • 如果屏幕尺度跨度太大可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。
    • 设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂

5. rem响应式布局

• rem定义

  rem 是相对于 html 根元素的字体大小的单位。我们通过修改 html 中 font-size 的字体大小来控制 rem 的大小。

• rem使用示例

  html { font-size: 10px;}.box { width: 10rem; height: 20rem;}
  

  当 html 中 font-size: 10px; 时，此时 1rem = 10px，所以 box 盒子的宽高分别为：100px 和 200px;
  当我们把 html 中 font-size: 20px; 时，此时 1rem = 20px,此时 box 盒子的宽高就为 200px 和 400px;
  我们通过修改 html 中 font-size 的字体大小来控制 rem 的大小。
• 优缺点

  • 优点
    兼容性：现代浏览器普遍支持REM单位，因此REM布局具有良好的兼容性。
  • 缺点
    • iframe引用问题：使用iframe引用时，REM布局可能会遇到问题。
    • 高度自适应问题：rem对于高度的自适应不够理想。对于高度和元素间距有特殊要求的设计来说，可能不是一个完美的解决方案。
    • 内容展示问题：随着屏幕尺寸的变化，内容可能不会展示更多或更少，这可能不符合用户期望的体验。

3. 结语

综合以上不同响应式实现方案的优缺点，目前还没有完美的实现方案，可以根据实际的需求选择合适的实现方式。