移动网页开发

移动端知识

视口标签

视口标签：

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

物理像素和CSS像素

物理像素：（也称设备像素）是设备屏幕的实际物理像素数量，即硬件层面的像素点总数，出厂默认。

例如：一台设备的屏幕分辨率为2532x1170，表示横向有2352个物理像素，纵向有1170个物理像素。

硬件相关：由屏幕硬件决定，不同设备的物理分辨率可能不同。

将更多的物理像素点压缩至一块屏幕里，从而达到更多的分辨率，提高了屏幕显示的细腻程度。

CSS像素：（也称设备独立像素或者逻辑像素）是CSS中使用的虚拟像素单位，用于布局和样式计算。它是一个抽象概念，不直接对应物理像素，而是通过设备像素比（DPR）与物理像素关联。

比如：PC端，1个CSS像素就是1个物理像素，但是手机端要看DPR。

vw/vmin适配方案

实现移动端适配方案：

注意：不管哪种方案，页面布局还是使用grid、flex、百分比等，元素大小需要进行适配。

vw/vh单位适配

vw（Viewport Width）是一种基于视窗宽度的相对单位，非常适合于移动端适配。

vw单位定义：

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

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

设计稿转换公式：

vw值 = （元素在设计稿中的px值 / 设计稿宽度） x 100vw

例如：（106 / 375） * 100vw = 28.26vw

新知识

圆角

CSS提供了四个独立的圆角属性，分别控制四个角：

• border-top-left-radius：左上角
• border-top-right-radius：右上角
• border-bottom-right-radius：右下角
• border-bottom-left-radius：左下角

注意：如果后面跟两个值分别表示该角的水平半径和垂直半径

border-bottom-left-radius：150px 20px；

上述代码最终画出来的是一个椭圆。

去除高亮

a {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    /* 移除移动端点击高亮 */
}

vmin/vmax单位

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

rem适配方案

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

设计稿转换公式：

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

(106 / 37.5) = 2.826 rem