核心理念：移动优先
在开始写代码之前，最重要的是建立正确的思想，现代自适应布局的核心思想是 “移动优先”（Mobile First）。
（图片来源网络，侵删）
什么是移动优先？
- 从最小屏幕开始设计：首先为最小屏幕的设备（如手机）设计和编写代码，网站只包含最核心、最必要的内容和功能,布局是单列的。
- 逐步增强：随着屏幕尺寸的增大（如平板、桌面），通过媒体查询 逐步添加样式和布局，增加更复杂的功能、多列布局、更大的图片和字体等。
为什么移动优先很重要？
- 性能优化：移动设备网络和性能可能受限,优先加载核心内容能显著提升加载速度和用户体验。
- 内容为王：它强迫你思考什么才是最重要的内容,避免了在桌面端堆砌过多无关紧要的元素。
- 代码更简洁：你只需要为更大的屏幕“添加”样式，而不是为小屏幕“隐藏”样式，CSS代码更清晰、更易于维护。
关键技术
实现自适应布局主要依赖以下三项核心技术，它们相辅相成,缺一不可。
Viewport (视口)
这是移动端自适应的基石。<meta name="viewport"> 标签告诉浏览器如何控制页面的尺寸和缩放。
（图片来源网络，侵删）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：告诉浏览器，页面的宽度应该等于设备的屏幕宽度，而不是默认的桌面版宽度（通常是980px）,这是实现自适应的第一步。initial-scale=1.0：设置页面的初始缩放比例为1.0，即不缩放，这样能防止移动浏览器在小屏幕上对页面进行“智能”缩放。
没有这个标签，你的网站在手机上会显示一个缩小的桌面版页面，用户体验极差。
响应式图片
图片是占用带宽的大户,处理不好会严重影响性能。
-
使用
srcset和sizes属性：为不同屏幕密度的设备提供不同尺寸的图片,让浏览器自动选择最合适的一个加载。<!-- srcset: 定义图片源和对应的宽度（或像素密度）。 sizes: 告诉浏览器在什么屏幕宽度下，图片会占据多大的显示空间。 --> <img src="img-small.jpg" srcset="img-medium.jpg 1000w, img-large.jpg 2000w" sizes="(max-width: 600px) 100vw, 50vw" alt="一个自适应的图片">1000w表示图片的原始宽度是1000像素。(max-width: 600px) 100vw的意思是：如果屏幕宽度小于等于600px，图片将占据视口宽度的100%；否则，占据50%。
-
使用
<picture>元素：当需要在不同的屏幕尺寸下显示不同的图片（横屏和竖屏用不同的构图）时，<picture>是最佳选择。<picture> <source media="(max-width: 600px)" srcset="img-portrait.jpg"> <source media="(min-width: 601px)" srcset="img-landscape.jpg"> <!-- 如果上面的 source 都不匹配，则显示默认的 img --> <img src="img-default.jpg" alt="描述"> </picture>
媒体查询
这是实现布局变化的核心，它允许你根据设备的特定特征（如宽度、高度、方向）来应用不同的 CSS 样式。
基本语法：
/* 当屏幕宽度大于等于 768px 时（平板设备） */
@media (min-width: 768px) {
/* 在这里写针对平板的样式 */
.container {
width: 750px;
margin: 0 auto;
}
.sidebar {
float: left;
width: 25%;
}
.main-content {
float: right;
width: 75%;
}
}
/* 当屏幕宽度大于等于 992px 时（桌面设备） */
@media (min-width: 992px) {
/* 在这里写针对桌面的样式 */
.container {
width: 970px;
}
.sidebar {
width: 33%;
}
.main-content {
width: 67%;
}
}
移动优先的写法（推荐）：
先写移动端的默认样式，然后通过 min-width 媒体查询来“增强”它。
/* 1. 移动端默认样式 (所有设备) */
body {
font-family: sans-serif;
line-height: 1.6;
}
.container {
width: 95%; /* 在小屏幕上占满 */
margin: 0 auto;
padding: 10px;
}
.sidebar, .main-content {
width: 100%; /* 默认单列布局 */
}
/* 2. 平板设备 (min-width: 768px) */
@media (min-width: 768px) {
.container {
width: 750px;
}
.sidebar {
float: left;
width: 25%;
}
.main-content {
float: right;
width: 75%;
}
}
/* 3. 桌面设备 (min-width: 992px) */
@media (min-width: 992px) {
.container {
width: 970px;
}
.sidebar {
width: 33%;
}
.main-content {
width: 67%;
}
}
布局技术选择
有了以上基础,我们可以选择具体的布局技术来实现自适应。
弹性盒子布局
Flexbox 是一维布局模型，非常适合用于组件内的对齐和分布，例如导航栏、页脚、卡片列表等。
特点：
- 强大的对齐能力：可以轻松实现居中、拉伸、分布等效果。
- 灵活的项目尺寸：项目可以灵活地伸缩以填充可用空间。
示例：一个简单的导航栏
<nav class="main-nav"> <a href="#">首页</a> <a href="#">lt;/a> <a href="#">服务</a> <a href="#">联系</a> </nav>
.main-nav {
display: flex; /* 启用 Flexbox */
justify-content: space-between; /* 项目之间平均分布 */
background-color: #333;
padding: 10px;
}
.main-nav a {
color: white;
text-decoration: none;
padding: 5px 10px;
}
/* 在小屏幕上，可能希望导航栏变成垂直的 */
@media (max-width: 600px) {
.main-nav {
flex-direction: column; /* 改变方向为垂直 */
align-items: center; /* 居中对齐 */
}
}
CSS Grid 布局
Grid 是二维布局模型，非常适合用于页面的整体布局，例如定义页头、主内容区、侧边栏和页脚的宏观结构。
特点：
- 二维控制：可以同时控制行和列。
- 复杂的布局：可以轻松创建不对称的复杂布局。
示例：一个典型的页面布局
<div class="page-layout"> <header>页头</header> <aside class="sidebar">侧边栏</aside> <main class="content">主要内容</main> <footer>页脚</footer> </div>
.page-layout {
display: grid;
/* 定义三列：侧边栏固定，内容区自适应，页头页脚跨越三列 */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 200px 1fr; /* 侧边栏200px宽，内容区占据剩余空间 */
grid-template-rows: auto 1fr auto;
min-height: 100vh; /* 让布局至少占满整个视口高度 */
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
footer { grid-area: footer; }
/* 在小屏幕上，我们希望它变成单列 */
@media (max-width: 768px) {
.page-layout {
/* 重新定义网格区域，变成单列 */
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
/* 只需要一列 */
grid-template-columns: 1fr;
}
}
