1.移动端基础

1.1.屏幕

移动端和pc端开发差异比较大的就是屏幕了,这里说的差异主要体现在移动端大屏幕碎片化,各种尺寸和各种分辨率的机型非常多,所以,移动端需要解决的问题就是如何去适配各种屏幕尺寸,后面我们有单独章节来讲如何适配,在这里需要先科普一些基础知识

1.什么是屏幕尺寸?

屏幕的尺寸指的是对角线的长度,单位一般用英寸

2.什么是分辨率?

分辨率指的是屏幕水平和垂直方向上像素点的个数,一般用px来做单位,比如:移动端分辨率19201080就表示水平方向上有1080个px,垂直方向上有1920个px,在pc端有点不一样,pc端的19201080,表示的是水平方向有1920个像素,垂直方向有1080个像素点

1.2.像素密度

像素密度表示屏幕每英寸的像素数量,像素密度英文简称PPI(Pixels Per Inch),这个概念是借鉴印刷行业中的DPI而来,DPI(Dots Per Inch)表示打印机每英寸可以喷的墨汁点数,把这个墨汁点换成像素点就可以了。DPI和PPI都可以被称为像素密度,但是PPI应用更广泛

PPI如何计算?以iphone6为例,分辨率是1334*750,尺寸是4.7英寸

根据勾股定理,我们可以计算出4.7英寸这条对角线上有多少个像素点,然后把这个像素点除以4.7英寸,就知道了每英寸上有多少个像素点,计算出来的值就是PPI,我们通过js来计算

var ppi = Math.sqrt(Math.pow(1334, 2) + Math.pow(750, 2)) / 4.7
console.log(ppi)

Retina屏是什么?Retina屏又叫做视网膜屏,是苹果注册了的一种命名方式,指的是在正常视线距离内肉眼很难看到像素的屏幕,一般手机屏幕达到300ppi就可以叫做retina屏幕

1.3.像素详解

1.设备像素(物理像素)

一个物理像素是屏幕上最小的物理显示单元,在操作系统的调度下,每个设备像素都有自己的颜色值和亮度值,通常我们买手机的时候看的屏幕分辨率参数就是物理像素,比如:华为p30的分辨率2340*1080,这里指的是横向有1080个物理像素,垂直方向2340个物理像素

2.设备独立像素(密度无关像素)

设备独立像素可以认为是计算机坐标系统中的某一个点,这个点代表一个可以由程序使用的虚拟像素,比如css像素,相关的系统会把这个虚拟像素转换为物理像素显示,所以物理像素和设备独立像素之间是存在一种对应关系的

3.设备像素比

前面我们说到物理像素和设备独立像素之间存在一定的对应关系,这个对象关系就是设备像素比,简称dpr,它的公式为:

设备像素比 = 物理像素/设备独立像素

通俗的说设备像素比的作用就是用n个物理像素区显示一个css像素,举个例子,dpr为1的时候,一个物理像素刚好对应一个css像素,dpr为2的时候,4个物理像素对应一个css像素

1.4.模拟调试工具

1.谷歌自带的调试工具

2.真机调试

我们使用nodejs来开启一个调试服务器,所以在使用真机调试的时候,需要安装好nodejs环境,nodejs下载地址: https://nodejs.org/en/

一般选择长期支持版本:

下载以后,和普通软件安装一样把nodejs安装好就可以了,这里不描述安装过程

接下来我们需要用nodejs自带的包管理工具,安装好一个服务器,打开命令行工具,输入命令:

npm i live-server -g 

这个服务器安装好以后,进入到你的项目目录,然后执行命令:

live-server

服务启动后,通过http://127.0.0.1:8080/ 即可访问到我的项目目录,假如我的项目目录下有个test.html的文件,我现在要访问这个test.html做调试,那么我需要访问:http://127.0.0.1:8080/test.html

以上步骤,只是让我们在电脑上启动了一个服务器来管理我们开发的项目,接下来需要连接真机测试,这个时候需要注意一个关键的步骤,那就是让手机和电脑连接在同一个局域网内(同一个wifi),这个时候ip段是一样的才能访问,举个例子: 我的电脑ip为:192.168.31.30,我只需要在手机端访问:http://192.168.31.30:8080/test.html 就可以打开相应页面了