移动网页开发
- 移动端知识
- vw/vmin适配方案
- .rem适配方案
移动端知识
常见的移动端开发
- 原生APP开发：针对安卓，ios，鸿蒙移动操作系统开发的APP
- 小程序端：微信小程序，支付宝小程序，uniapp等
- web端(H5)：H5,CSS3,JavaScript等技术
PC页面会设置版心，移动端如何设置呢？
移动端页面宽度根据设备宽度来确定
视口标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">| 属性名 | 作用 | 取值 | 默认值 | 示例 | 注意事项 |
|---|---|---|---|---|---|
width | 设置视口宽度 | device-width 或具体数值（如 375） | 980px（移动端默认） | <meta name="viewport" content="width=device-width"> | 移动端默认的980px称为布局视口，device-width 以匹配设备宽度称为理想视口 |
initial-scale | 页面初始缩放比例 | 数值（如 1.0） | 1.0 | <meta name="viewport" content="initial-scale=1.0"> | 与 width 和 device-width 配合使用，避免缩放混乱 |
minimum-scale | 允许用户缩放的最小比例 | 数值（如 0.5） | 0.1 | <meta name="viewport" content="minimum-scale=0.5"> | 若设为 1.0，则用户无法放大页面 |
maximum-scale | 允许用户缩放的最大比例 | 数值（如 2.0） | 10.0 | <meta name="viewport" content="maximum-scale=3.0"> | 限制缩放范围，但可能影响无障碍访问 |
user-scalable | 是否允许用户手动缩放 | yes 或 no | yes | <meta name="viewport" content="user-scalable=no"> | 禁用缩放可提升体验，但需谨慎使用（无障碍场景需权衡） |
物理像素和CSS像素
物理像素（也称设备像素）：是设备屏幕的实际物理像素数量，即硬件成眠的像素点中枢，出厂默认。
例如：一台设备的屏幕分辨率为2352*1170，表示横向有2352个物理像素，纵向有1170个物理像素。
硬件相关：由屏幕硬件决定，不同设备的物理分辨率可能不同。
将更多的物理像素点压缩至一块屏幕里，从而达到更多的分辨率，提高了屏幕显示的细腻程度
CSS像素（也称设备独立像素或者逻辑像素）：
是CSS中使用的虚拟像素单位，用于布局和样式计算
它是一个抽象概念，不直接对应无力像素，而是通过**设备像素比（Device Pixel Ratio, DPR）**与物理像素关联。
比如：PC端，一个CSS像素就是一个物理像素，但是手机端要看DPR
设计稿：
移动端设计稿通常以750作为标准宽度（尤其是微信小程序，H5页面等）
- 早期移动端设计以
iPhone为基准，，750px称为行业默认规范 - iPhone 6/7/8 的物理分辨率是750×1334px，设计稿按750px宽度制作时，能直接对应这些设备的1:1视觉还原，方便设计师精准把控细节（如字体大小，间距等）
设计稿按750px（2倍大小）制作后：
- 开发时直接缩放到50%（如CSS中写375px），即可适配逻辑分辨率。
- 图片和图标按`2倍尺寸输出，在高清屏上显示更清晰。（2倍图）
vw/vmin适配方案
实现移动端适配方案：
- 响应式：一套代码通过响应式方案完成pc，平板，手机端的适配（vivo官网，华为官网等）
- 单位适配：pc和平板通过响应式完成适配。单独制作手机端页面，通过rem，vw单位完成页面适配（淘宝手机端，B站手机端，京东手机端等）
不管哪种方案，页面布局还是使用grid，flex百分比等，元素大小需要进行适配
vw/vh单位适配：
vw是一种基于视口宽度的相对单位，非常适合用于移动端适配
vw单位定义：
- 1vw=视窗宽度的1%
- 如果视窗宽度是375px，则1vw=3.75px
- 同理100vw=等于视窗完整宽度
- vh：视窗高度的1%
- 注意vw和%不一样，%相对于父容器
注意：
网页是主要对屏幕宽度适配，所以通常用vw即可，vh很少用到
设计稿转换公式：
vw值=（元素在设计稿中的px值 / 设计稿宽度）× 100vw
(106px/375px) * 100vw = 28.26vw
方式1：使用calc函数
.nav { width: calc(106 / 375 * 100vw); height: calc(106 / 375 * 100vw);}书写繁琐
方式2：使用CSS预处理器（推荐）
- less或者sass实现，后续工程化讲
但是实际开发里面直接写px不需要计算
方式3：结合PostCSS插件（最佳实践）
- less/sass代码直接写
px - 使用postcss-px-to-viewport插件，打包发布的时候会统一自动转换为
VW - 但是需要脚手架知识，后续vue阶段讲
方式4：使用trae插件转换（当前阶段）
px to rem & rpx & vw(cssrem)
独立圆角属性
css提供了四个独立的圆角属性，分别控制四个角：
border-top-left-radius左上角圆角
border-top-right-radius右上角圆角
border-bottom-left-radius左下角圆角
border-bottom-right-radius右下角圆角
如果后面跟两个值分别表示该角的水平半径和垂直半径
点击高亮
a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 移除移动端点击高亮 */}移动端适配
vmin/vmax单位：
当设备旋转（如手机从竖屏转横屏时），视口的宽高会变化，但vmin始终取当前宽高的较小值，vmax取较大值
| 特性 | vw (Viewport Width) | vmin (Viewport Minimum) |
|---|---|---|
| 定义 | 视口宽度的 1% | 视口较小尺寸（宽度或高度）的 1% |
| 计算依据 | 仅基于视口宽度（width） | 取视口宽度与高度的较小值 |
| 方向敏感性 | 始终基于宽度，无视口方向 | 根据视口方向动态调整（宽度或高度取较小值） |
| 竖屏（如手机） | 基于宽度（如 375px 宽度的 50vw = 187.5px） | 基于高度（如 812px 高度的 50vmin = 406px） |
| 代码示例 | width: 50vw;（视口宽度的 50%） | height: 50vmin;（视口较小边的 50%） |
| 优势 | 精准控制横向尺寸 | 自动适应不同方向，适合全屏或动态比例布局 |
| 劣势 | 无法响应视口高度变化 | 在宽屏设备上可能不如 vw 直观 |
如果需要照顾手机端横屏状态，可以使用 vmin，比如 B 站全站就采用 vmin 来适配横竖屏场景。
rem适配方案
rem单位适配：
通过动态修改根元素（html）的font-size属性，使得页面元素基于rem的布局能够自适应不同屏幕尺寸。
比如京东、淘宝、小米移动端使用rem适配
动态修改html文字大小（基准值）方案：
方式一：媒体查询方案(京东写法)
html { font-size: 20px; font-size: 5.33333vw;}
@media screen and (max-width: 320px) { html { font-size: 17.0667px; }}
@media screen and (min-width: 540px) { html { font-size: 28.8px; }}方式二：js方式引入（推荐）
阿里巴巴手淘团队开发的移动端适配方案Flexible.js通过动态调整根元素html的font-size属性，结合rem单位实现页面自适应（拼多多，淘宝写法）。
<script src="./js/flexible.js"></script>//set 1rem = view width / 10function setRemUnit() { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px'}方式三：使用PostCSS插件（最佳实践）
设计稿转换公式：
rem值 = 设计稿元素尺寸 / html的font-size（基准值）
(106 / 37.5) = 2.826rem
- less/sass代码直接写
px - 使用postcss-pxtorem插件，打包发布的时候会容易自动转换为
rem - 但是需要脚手架知识，后续Vue阶段讲
方式四：转换插件（目前阶段）
- Flexible.js实现动态修改html根字号大小
- 利用插件实现px转换为rem单位
部分信息可能已经过时