css实现响应式详解

一、媒体查询（Media Queries）

基本概念
媒体查询是 CSS3 中用于根据不同的设备特性（如屏幕宽度、高度、设备类型等）应用不同样式规则的技术。它允许你为特定的媒体类型（如屏幕、打印、手持设备等）和条件（如最小宽度、最大宽度等）定义样式。
例如，你可以为屏幕宽度小于 768px 的设备（通常是手机）定义一组样式，为屏幕宽度在 768px 到 1024px 之间的设备（平板电脑）定义另一组样式。
语法结构
媒体查询的基本语法如下：

@media media - type and (media - feature - rule) {/* CSS样式规则 */
}

其中，media - type可以是screen（用于屏幕设备）、print（用于打印设备）、handheld（用于手持设备）等。media - feature - rule是具体的媒体特性规则，如(max - width: 768px)表示最大宽度为 768px 的设备。
例如，以下代码会在屏幕宽度小于或等于 600px 时将背景颜色设置为蓝色：

@media screen and (max - width: 600px) {body {background - color: blue;}
}

常见的媒体特性
屏幕宽度相关
max - width：指定一个最大宽度值，当屏幕宽度小于或等于这个值时，媒体查询中的样式规则生效。例如，(max - width: 480px)适用于屏幕宽度不超过 480px 的设备，常用于为手机等小屏幕设备设计样式。
min - width：指定一个最小宽度值，当屏幕宽度大于或等于这个值时，样式规则生效。比如，(min - width: 768px)可以用于为平板电脑及更大屏幕设备设计样式。
屏幕高度相关（相对较少使用，但在某些场景下很有用）
max - height和min - height的作用与宽度相关特性类似，只是针对屏幕的高度。例如，在设计一个高度受限的弹出窗口或者全屏应用时，可以使用这些特性来确保样式在不同高度的屏幕上都能正常显示。
设备方向
orientation: portrait（纵向）和orientation: landscape（横向）可以根据设备的方向应用不同的样式。例如，在手机从纵向切换到横向时，可以改变布局，使内容更好地适应屏幕。

二、弹性布局（Flexbox）

基本概念
Flexbox 是一种用于在容器中布局子元素的 CSS 布局模型。它提供了一种灵活的方式来分配空间和对齐元素，使得布局能够更好地适应不同的屏幕尺寸。
使用 Flexbox，可以轻松地实现水平和垂直方向的对齐，以及子元素的自动缩放和排列。
关键属性
容器属性
display: flex：将一个元素设置为 Flex 容器。一旦设置为 Flex 容器，其内部的子元素（称为 Flex 项目）就可以使用 Flexbox 的布局规则进行排列。
flex - direction：用于指定 Flex 项目的排列方向。可以是row（水平方向，从左到右）、row - reverse（水平方向，从右到左）、column（垂直方向，从上到下）或column - reverse（垂直方向，从下到上）。
justify - content：用于在主轴（由flex - direction确定）上对齐 Flex 项目。常见的值有flex - start（默认值，项目向主轴起点对齐）、flex - end（项目向主轴终点对齐）、center（项目在主轴上居中对齐）、space - between（项目在主轴上均匀分布，两端对齐）和space - around（项目在主轴上均匀分布，每个项目两侧的间隔相等）。
align - items：用于在交叉轴（与主轴垂直的轴）上对齐 Flex 项目。值包括stretch（默认值，项目会拉伸以填充交叉轴方向的容器空间）、flex - start、flex - end和center。
项目属性
flex - grow：定义 Flex 项目在容器有剩余空间时的伸展比例。例如，如果有两个 Flex 项目，一个flex - grow为 1，另一个为 2，那么后者将占用剩余空间的三分之二，前者占用三分之一。
flex - shrink：与flex - grow相反，它定义了在容器空间不足时 Flex 项目的收缩比例。
flex - basis：用于指定 Flex 项目在分配多余空间或收缩之前的初始大小。它可以是一个长度值（如100px）或一个百分比。

三、网格布局（Grid Layout）

基本概念
CSS Grid 是一种二维布局系统，它允许你将页面划分为行和列，然后将元素放置在这些网格单元中。网格布局提供了强大的布局控制能力，能够创建复杂的页面布局，并且在响应式设计中也非常有用。
关键属性
容器属性
display: grid：将一个元素设置为网格容器。
grid - template - rows和grid - template - columns：用于定义网格的行和列的大小。例如，grid - template - rows: 100px 200px;表示网格有两行，第一行高度为 100px，第二行高度为 200px。grid - template - columns的用法类似。
grid - gap：用于设置网格单元之间的间隙大小。可以分别设置行间隙和列间隙，如grid - row - gap和grid - column - gap，也可以使用grid - gap同时设置行和列的间隙（grid - gap: 10px 20px;表示行间隙为 10px，列间隙为 20px）。
项目属性
grid - row - start、grid - row - end、grid - column - start和grid - column - end：这些属性用于指定项目在网格中的位置，即项目从哪一行 / 列开始，到哪一行 / 列结束。例如，grid - row - start: 2; grid - row - end: 4;表示项目跨越从第二行到第四行（不包括第四行）的网格单元。
grid - area：这是一个简写属性，可以同时指定项目的行和列位置。例如，grid - area: 2/1/4/3;表示项目从第二行第一列开始，到第四行第三列结束。

四、相对单位（如 vw、vh、% 等）

## vw 和 vh（视口单位）
vw（viewport width）表示视口宽度的 1%，vh（viewport height）表示视口高度的 1%。例如，如果一个元素的宽度设置为50vw，那么它的宽度将是视口宽度的 50%。
这些单位在创建全屏幕或基于视口比例的布局时非常有用。比如，你可以使用vh来设置一个元素的高度，使其始终占据屏幕高度的一定比例，这样在不同高度的屏幕上也能保持一致的视觉效果。
百分比（%）单位
百分比单位是相对于父元素的尺寸来计算的。例如，在一个容器中，如果一个子元素的宽度设置为50%，那么它的宽度将是父元素宽度的一半。
在响应式设计中，百分比单位可以用于创建灵活的布局。比如，在一个多列布局中，各列的宽度可以使用百分比来定义，这样当父容器的宽度发生变化时（如在不同屏幕尺寸下），列宽也会相应地调整。
em 和 rem：
em 是相对于元素的字体大小，rem 是相对于根元素（通常是）的字体大小。使用它们可以创建基于字体大小的相对尺寸。
例如，font-size: 1.2em; 会使元素的字体大小为父元素字体大小的 1.2 倍；font-size: 1.2rem; 会使元素的字体大小为根元素字体大小的 1.2 倍。