1.视口
视口标签
视口元标签（Viewport Meta Tag）用于控制网页在移动设备上的视口行为，确保页面能够正确缩放和调整。通常在HTML的<head>部分添加如下代码：
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
| 属性 | 解释说明 |
|---|---|
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scal | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no（1或0） |
标准的viewport设置：
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
2.二倍图
在网页开发中，尤其是在设计高分辨率屏幕（如Retina显示屏）上使用的图像时，使用二倍图（2x图像）是一个常见的做法。二倍图的概念主要是为了适应高分辨率屏幕，确保图像在这些屏幕上看起来清晰锐利。以下是关于CSS二倍图的一些关键点和使用方法：
什么是二倍图？
二倍图（@2x images）是指其分辨率是标准分辨率图像的两倍的图像。例如，如果标准图像的尺寸是100x100像素，那么二倍图的尺寸则是200x200像素。
为什么需要二倍图？
高分辨率屏幕（如Retina屏）上的像素密度比普通屏幕高，这意味着同样大小的区域上有更多的像素。如果直接在高分辨率屏幕上使用标准分辨率的图像，这些图像可能会显得模糊不清。因此，使用二倍图可以确保图像在高分辨率屏幕上看起来更加清晰锐利。
背景缩放 background-size
background-size: 背景图片宽度 背景图片高度;
- 单位： 长度|百分比|cover|contain;
- cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
- contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
3.flex布局
基本概念
Flexbox布局包括两个主要组件：容器（container）**和**项目（items）。容器是Flexbox布局的父元素，项目是其直接子元素。
设置Flex容器
通过将容器的display属性设置为flex或inline-flex来启用Flexbox布局：
.container {
display: flex; /* 或者 inline-flex */
}
1.父项常见属性
flex-direction：定义主轴（main axis）的方向及项目的排列方向。
-
row（默认值）：从左到右。 -
row-reverse：从右到左。 -
column：从上到下。 -
column-reverse：从下到上。.container {
flex-direction: row;
}
justify-content：定义项目在主轴上的对齐方式。
-
flex-start（默认值）：从起点对齐。 -
flex-end：从终点对齐。 -
center：居中对齐。 -
space-between：两端对齐，项目间隔均匀（先两边贴边，再平分剩余空间）。 -
space-around：项目周围间隔均匀（平分剩余空间）。 -
space-evenly：项目之间的间隔均匀。.container {
justify-content: center;
}
flex-wrap：控制项目是否在主轴上溢出时换行。
-
nowrap（默认值）：不换行（此时若是容纳不下，则会缩小子盒子的宽度）。 -
wrap：换行。 -
wrap-reverse：反向换行。.container {
flex-wrap: wrap;
}
align-items：定义项目在侧轴上的对齐方式，在子项为单项（单行）的时候使用。
-
stretch（默认值）：如果项目未设置高度或设置为auto，则拉伸项目以填充容器。 -
flex-start：对齐到侧轴的起点。 -
flex-end：对齐到侧轴的终点。 -
center：居中对齐。 -
baseline：项目的第一行文字基线对齐。.container {
align-items: center;
}
align-content：设置侧轴上的子元素的排列方式（多行）。如果只有一根轴线，此属性不起作用。（在有换行的时候使用）
-
stretch（默认值）：轴线填充侧轴。 -
flex-start：对齐到从侧轴的起点。 -
flex-end：对齐到侧轴的终点。 -
center：居中对齐。 -
space-between：子项在侧轴先分布在两头，再平分剩余空间。 -
space-around：子项在侧轴平分剩余空间。 -
space-evenly：轴线之间的间隔均匀。.container {
align-content: space-between;
}
flex-flow ：是flex-direction和flex-wrap的简写。
.container {
flex-flow: row wrap;
}
2.子项常见属性
flex ：是flex-grow、flex-shrink和flex-basis的简写。
-
flex-grow: 1：表示该项目可以占据父容器中剩余的空间。如果有多个项目的flex-grow值都设置为1，这些项目将平分剩余的空间。例如，如果一个容器中有两个项目，它们的flex-grow都为1，那么它们将平分多余的空间。 -
flex-shrink: 1：表示当父容器的空间不足时，该项目可以缩小。如果所有项目的flex-shrink值都为1，这些项目将等比例地缩小以适应父容器的空间。 -
flex-basis: 0%：表示项目的初始大小为 0。这意味着项目的大小完全由flex-grow属性决定，并且没有初始空间分配。.item {
flex: 1 1 100px;
}
align-self ：允许单个项目在侧轴上有不同的对齐方式，覆盖align-items属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
-
auto（默认）：继承父容器的align-items值。 -
flex-start：项目在交叉轴的起点对齐。 -
flex-end：项目在交叉轴的终点对齐。 -
center：项目在交叉轴的中心对齐。 -
baseline：项目的文本基线对齐。 -
stretch：如果项目未设置高度或高度为auto，则项目拉伸以填充容器。.item {
align-self: flex-end;
}
order：定义项目的排列顺序。默认值为0，值越小越靠前。
.item {
order: 1;
}
4.rem布局
1.rem单位
REM单位是相对于根元素（通常是 <html> 元素）的字体大小来计算的。如果根元素的字体大小为16px，那么1rem就等于16px。如果根元素的字体大小为20px，那么1rem就等于20px。
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
2.媒体查询
媒体查询（Media Queries）是CSS3中引入的一种强大的技术，它允许根据设备特性（如屏幕宽度、设备类型、屏幕分辨率等）来应用不同的CSS样式。这使得网站能够在不同设备上提供适当的布局和样式，从而实现响应式设计。
基本语法
@media mediatype and (media feature) {
/* CSS rules */
}
- mediatype ：媒体类型，如
screen（屏幕）、print（打印机）、all等。 - 关键字 :
and not only - media feature ：媒体特性，如
width、min-width、max-width等。 - CSS rules：根据媒体查询条件应用的CSS规则。
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
and：可以将多个媒体特性连接到一起，相当于"且"的意思。
not：排除某个媒体类型，相当于"非"的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。
常用的媒体特性
width和height：设备宽度和高度。min-width和min-height：最小设备宽度和高度。max-width和max-height：最大设备宽度和高度。orientation：设备方向，如portrait（纵向）和landscape（横向）。aspect-ratio：设备宽高比。device-aspect-ratio：设备的物理宽高比。resolution：设备分辨率。
引入资源
可以在引入css文件的时候加上媒体查询，表示在该条件下引用这个css文件
语法规范：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
示例：
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">