【CSS进阶】常见的页面自顺应的方法

在前端开发中，自顺应布局（Responsive Design）是一种让网页可以大概顺应差别屏幕尺寸、装备和分辨率的技能。常见的自顺应布局方法包罗 流式布局、弹性布局（Flexbox）、栅格布局（Grid）、媒体查询（Media Queries）、rem/vw/vh 等单元 以及 CSS 框架（如 Bootstrap）。
<hr> 1. 媒体查询（Media Queries）

媒体查询 是 CSS 实现自顺应布局的核心技能之一，允许根据屏幕尺寸、装备范例、分辨率等条件来应用差别的 CSS 样式。
示例：针对差别装备应用差别的 CSS

1. /* 默认样式：适用于大屏幕设备 */
2. body {
3.    
4.    
5.     font-size: 18px;
6.     background-color: lightblue;
7. }
9. /* 平板设备（屏幕宽度小于 1024px 时） */
10. @media screen and (max-width: 1024px) {
11.    
12.    
13.     body {
14.    
15.    
16.         font-size: 16px;
17.         background-color: lightgreen;
18.     }
19. }
21. /* 手机设备（屏幕宽度小于 768px 时） */
22. @media screen and (max-width: 768px) {
23.    
24.    
25.     body {
26.    
27.    
28.         font-size: 14px;
29.         background-color: lightcoral;
30.     }
31. }

复制代码

原理：

  

• 当屏幕宽度小于 1024px 时，字体巨细调解为 16px，配景变为绿色。  
  
• 当屏幕宽度小于 768px 时，字体巨细调解为 14px，配景变为赤色。
  

实用场景：

  

• 实用于差别装备的 UI 适配，如 PC、平板、手机。  
  
• 可以风雅控制差别屏幕下的布局和样式。
  

<hr> 2. 弹性布局（Flexbox）

Flexbox（弹性盒模子） 是 CSS3 提供的一种强大的布局方式，实用于一维（单行或单列）布局，可以大概主动调解子元素的巨细和位置，以顺应差别的屏幕尺寸。
示例：利用 Flexbox 让页面元素主动调解

1. .container {
2.     display: flex;
3.     flex-wrap: wrap;  /* 自动换行 */
4.     justify-content: space-between; /* 平均分布 */
5. }
7. .item {
8.     width: 30%;
9.     height: 100px;
10.     background-color: skyblue;
11.     margin: 10px;
12.     text-align: center;
13.     line-height: 100px;
14.     font-size: 18px;
15. }
16. <<

复制代码