移动端适配总结

1. 视口标签

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动端页面宽度根据设备宽度来走

2. 物理像素（设备像素）和逻辑像素（CSS像素）

设计师设计稿是按照物理像素 设计的。手机分辨率

前端开发是按照CSS像素开发代码的。

设备像素比(DPR)=物理像素/CSS像素

手机高清屏的出现，需要2倍或3倍图。

iPhone 4 开始使用 Retina 屏幕：1 个 CSS 像素 = 2×2 个物理像素（即 dpr = 2）。
如果用 1 倍图（100×100），在 2 倍屏上会被拉伸到 200×200 物理像素 → 模糊！
用 2 倍图（200×200），正好填满 200×200 物理像素 → 清晰锐利。

设计稿和开发的关系（以375为例）

角色	操作
UI设计师	在Sketch/Figma中设置画布宽度为375pt(逻辑尺寸)，但导出图片时，按2倍(750px宽)导出
前端开发者	写CSS时仍按375px宽度布局，引用图片时，用img标签或background-image,不写宽高或写逻辑尺寸（浏览器自动格局dpr选择合适图片，或通过JS/媒体查询适配）

3.移动端适配方案

3.1 响应式

一套代码通过响应式方案完成PC、平板、手机端的适配。

代表：vivo官网，华为官网

媒体查询

css 复制代码

/* 默认：移动端样式 */
.container {
  width: 100%;
  padding: 10px;
}

/* 平板及以上 */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* 桌面端 */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

/* 大屏 */
@media (min-width: 1440px) {
  .container {
    width: 1200px;
  }
}

3.2 单位适配

PC和平板通过响应式适配。

单独制作手机端页面，通过rem/vw单位完成页面适配。

代表：淘宝手机端、B站手机端、京东手机端

插件转换：编写代码时都用px，编写完后，通过插件编译后转换为vw。

vue: postcss-px-to-viewport

弹性布局

弹性布局：flex布局(一维，主要用于一行布局时)

css 复制代码

.container{
    display: flex;
    flex-direction: row;      /*定义主轴方向，默认row, row-reverse/column/column-reverse*/
    justify-content: center;  /*控制项目在主轴上的对齐方式: flex-start（默认）flex-end center space-between space-around space-evenly*/
    align-items: stretch;     /*控制项目在交叉轴上的对齐方式:stretch（默认）flex-start flex-end center baseline*/
    height: 300px;            /* 容器必须有高度，否则交叉轴无空间 */
    flex-wrap: wrap;          /* 项目溢出时换行 */

    /*align-content：换行后，控制多根轴线的对齐方式，单根轴线时无效*/
} 
.container item{
	flex: 1 1 0; /*flex-grow: 1; flex-shrink: 1; flex-basis: 0px;*/
}

Grid布局（二维，同时控制行和列，用于多行多列布局）

css 复制代码

.container {
     display: grid;
     grid-template-columns: 100px 200px auto; /* 3列：固定+固定+剩余 */
     grid-template-rows: 50px 100px;           /* 2行 */
     gap: 16px; /* 行列间距 */
     justify-items: center; /* 所有项目水平居中 */
 	 align-items: start;    /* 所有项目顶部对齐 */
}

fr：分数单位（推荐！），表示剩余空间的比例
/* 4列，每列 1fr */
grid-template-columns: repeat(4, 1fr);

/* 响应式：小屏1列，中屏2列，大屏4列 */
@media (min-width: 768px) {
 .container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .container { grid-template-columns: repeat(4, 1fr); }
}

/* 每列最小 200px，最大为 1fr（自适应）
auto-fit：自动填充尽可能多的列 
minmax(200px, 1fr)：每列至少 200px，多余空间均分*/
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

图片响应式

html 复制代码

<picture>
	<source srcset="image-large.jpg" media="(min-width: 800px)">
	<source srcset="image-medium.jpg" media="(min-width: 400px)">
	<img src="image-small.jpg" alt="responsive image">
</picture>