css移动端开发

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)">