移动开发前知识-CFANZ编程社区

文章目录

移动端相关知识

物理像素

物理像素，有时也会被称为“屏幕分辨率"，如下图所示，iphone 5s的屏幕分辨率是 640*1136。
物理像素是真实像素。
在这里插入图片描述

独立像素

独立像素有时候可以理解成“css像素”，即px。
iphone 5s的独立像素是 320*568。
独立像素是虚拟像素。
在这里插入图片描述

像素比

像素比=物理像素/独立像素。
比如，iphone 5s的像素比=物理像素/独立像素 = 640/320=2。

移动端适配方案

viewport适配

使用<meta name="viewport" content="width=device-width,initial-scale=1.0">实现viewport适配。

viewport，即视口宽度，默认是980px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mobile</title>
    <style>
    .box{
        width:320px;
        height:320px;
        background-color:lightskyblue;
    }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

使用meta标签中设置viewport实现适配。
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mobile</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
    .box{
        width:320px;
        height:320px;
        background-color:lightskyblue;
    }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述
meta标签中，viewport的content里的各项参数说明如下表所示。

属性名	说明
`width`	视口宽度，值为正整数或`"device-width"` 值为正整数时，单位为`px` `device-width`，指移动设备的屏幕宽度
`height`	视口高度，值为正整数或`"device-height"` 值为正整数时，单位为`px` `device-width`，指移动设备的屏幕高度
`initial-scale`	视口初始缩放值相对于移动设备屏幕宽高进行缩放取值范围：`(0,10]` 大于1时，视口宽高将缩小
`maximum-scale`	用户最大可将视口缩放到什么程度取值范围：`(0,10]`
`minimum-scale`	用户最小可将视口缩放到什么程度取值范围：`(0,10]`
`user-scalable`	是否允许用户缩放视口 `yes`，可缩放 `no`，不可缩放

rem适配

小程序适配方案：rpx

rpx，responsive pixel，响应式像素。
小程序中，规定屏幕宽度总为750rpx。
iphone 5s，独立像素是350px，所以1rpx=350px/750=0.5px。
iphone 6plus，独立像素是414px，所以1rpx=414px/750=0.552px。
小程序会根据屏幕宽度自动计算出rpx值的大小。

好文推荐

为什么很多web项目还是使用 px，而不是 rem？