06-移动网页开发

06-移动网页开发

移动端知识

视口标签：

<meta name=“viewport” content=“width=device-width, initial-scale=1.”>

属性名	作用	取值	默认值	示例
width	设置视口宽度	device-width 或具体数值(如375)	980px(移动端默认)	<meta name=“viewport” content=“width=device-width”>
initial-scale	页面初始缩放比例	数值(如1.0)	1.0	<meta name=“viewport” content=“initial-scale=1.0”>
minimum-scale	允许用户缩放的最小比例	数值(如0.5)	0.1	<meta name=“viewport” content=“minimum-scale=0.5”>
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”>

vw/vmin适配方案

vw/vh单位适配：

vw(Viewport width)是一种基于视窗宽度的相对单位，非常适合用于移动端适配

vw 单位定义：

• 1vw=视窗宽度的 1%
• 如果视窗宽度是 375px，则 1vw=3.75px
• 同理 100vw=视窗完整宽度
• vh:视窗高度的 1%
• 注意vw和%不一样，%相对于父容器

设计稿转换公式：

​ vw值 = (元素在设计稿中的px值/设计稿宽度) * 100vw

示例：(106/375)*100vw =28.26vw

注意：网页是主要对屏幕宽度适配，所以通常用vw即可，vh很少用

物理像素和CSS像素的分别：

​ 物理像素。是设备屏幕的实际物理像素数量，出厂默认，平时我们说的设备分辨率，提高屏幕显示细腻程度。

​ CSS像素。用于布局和样式计算。跟设备 DPR有关系。

vmin / vmax 单位适配：

当设备旋转(如手机从竖屏转横屏)时，视口的高会变化，但vmin 始终取当前宽高的较小值，vmax取较大值。

使用方式同上

补：

• vertical-align: middle; 图片垂直居中

rem适配方案

rem单位适配：

通过动态修改根元素(html)的 font-size，使得页面元素基于 rem 的布局能够自适应不同屏幕尺寸，比如京东、淘宝、小米移动端使用rem适配

动态修改html文字大小(基准值)方案：

方式1：媒体查询方案（京东写法）

方式2：js方式引入（推荐）（拼多多、淘宝写法）

设计稿转换公式：

rem值=设计稿元素尺寸/html的font-size(基准值)

示例：(106/37.5)= 2.826 rem

方式3：使用PostCSS插件(最佳实践)

• less/sass代码直接写px
• 使用 postcss-pxtorem 插件，打包发布的时候会统一自动转换为rem
• 但是需要脚手架知识，后续Vue阶段讲

方式4：转换插件(目前阶段)

• Flexible.js 实现动态修改 html 根字号大小
• 利用插件实现 px 转换为 rem单位