移动端开发基础

妖狐艹你老母 2022-11-17 13:53 279阅读 0赞

### 移动端基础 ###

*  一、什么是移动Web？
 *   *  产品分类
     *   *  app（手机应用）
         *  H5
     *  app与H5的优劣势
     *   *  app
         *  H5
 *  二 、H5运行环境的分类
 *   *   *   *   *  为什么会出现这种模式？
 *  三、PC与移动web开发的区别
 *  四、移动端屏幕
 *   *   *   *  PPI
             *  像素分类:
             *  屏幕缩放
             *   *  PC端：
                 *  移动端：
             *  DPR：设备像素比
             *  Retina屏幕
 *  五、移动端浏览器及内核分析
 *   *   *   *  PC端浏览器
             *  移动端浏览器类型
             *  内核
 *  六、视口
 *   *   *   *  1、布局视口：
             *  3、理想视口
             *  4、自定义用户代码片
 *  七、使用相对长度单位em布局网页内容
 *   *   *   *  相对单位em的特性
             *  如果1em等于10px，
 *  八、12、相对单位rem
 *   *   *   *  相对单位rem的特性：
             *  通过js动态实现尺寸自适应
         *  感谢支持：@快乐养兔

# 一、什么是移动Web？ #

移动web，运行在移动设备上的页面网页

移动设备包括：手机、平板、地铁展示栏，商场的智能导航机器人其他的一些手持触摸设备等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 1]

## 产品分类 ##

### app（手机应用） ###

现在流行的app大部分都是原生app开发者开发  
安卓开发工程师  
IOS开发工程师

使用JavaScript来开发原生的app  
phone Gap、React native、…

### H5 ###

就是HTML页面，基本都是运行在浏览器中  
PC浏览器：chrome、safari、火狐…  
移动端浏览器：后续专门介绍

## app与H5的优劣势 ##

### app ###

优势:  
 功能完善【如调用产品电量】、体验好、可以离线使用【没有网页可以用】

劣势：  
 开发成本高【不同的平台需要开发不同的版本】、迭代不可控【上线通过的时间不受控制】、内容限制

### H5 ###

优势：  
 跨平台、开发成本低、更容易迭代【连上服务器直接上传修改】

劣势：  
 功能有限、操作体验欠佳、无法离线使用

# 二 、H5运行环境的分类 #

\*移动端浏览器

\*原生APP的webview中（hyBrid模式）

开发的H5页面嵌入到app的webview中显示

【webview 就像一个嵌套在app中的浏览器】

##### 为什么会出现这种模式？ #####

*  很好的发挥两者的优势，规避两者的弱势
 *  涉及到操作系统级别的选择用 app 来做，需要及时更新的就选择 H5做 ，分工明确
 *  这种模式，可能就是以后工作中最经常要用到的  
    ![在这里插入图片描述][20210409225906642.png]  
    webview不需要我们来书写实现，安卓和ios内部已经有这个东西了，我们只需要把写好的h5页面传到服务器上，把服务器地址给安卓或ios工程师即可，由他们把我们的页面放入webview中

# 三、PC与移动web开发的区别 #

*  终端设备
 *  输入特性
    
    pc:靠键盘输入
    
    移动端：软键盘、语音输入
 *  屏幕
    
    pc:分辨率差别不大，不论什么样的分辨率都需要版心放素材
    
    移动端：移动设备屏幕大小分辨率各种各样层出不穷，需要兼容不同的屏幕
 *  浏览器
    
    浏览器差别大不，都是使用同样的内核，谷歌，ie等等
 *  开发调试
    
    移动端：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 2]
 *  视口
    
     *  布局视口
        
        在写h5页面时候进行的布局分配
     *  视觉视口
        
        看到屏幕的样子
 *  布局方式
    
    我们前面学习的pc端的布局，浮动定位等等，在移动端同样适用

# 四、移动端屏幕 #

#### PPI ####

代表屏幕每英寸的像素数量，即像素密度  
高PPI屏幕显示的元素会比较精细（看起来会比较小），低PPI屏幕显示的元素相对来说就比较粗糙（看起来会比较大）

#### 像素分类: ####

*  设备像素(device independent pixels):
    
    设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
 *  CSS像素(CSS pixels):
    
    又称逻辑像素，是为web开发者创造，在CSS和JavaScript中使用的一个抽象的层【就是我们自己书写的多少px的像素】

#### 屏幕缩放 ####

##### PC端： #####

css的1个像素往往都是对应电脑屏幕的1个物理像素  
下图为4个CSS像素完全覆盖了4个设备像素  
![在这里插入图片描述][20210409230349326.png]

##### 移动端： #####

由于屏幕尺寸的限制，缩放是经常性的操作  
设备像素(深蓝色背景)、CSS像素(半透明背景)

缩小操作时，1个设备像素覆盖了多个CSS像素  
![在这里插入图片描述][2021040923041292.png]  
放大操作时，1个CSS像素覆盖了多个设备像素  
![在这里插入图片描述][20210409230426789.png]

#### DPR：设备像素比 ####

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值

> DPR = 设备像素 / CSS像素(某一方向上)

DPR值越大，屏幕分辨率越高

#### Retina屏幕 ####

同样大小的屏幕上,像素多了一倍,DPR = 2

DPR=2的屏幕最早出现在苹果4s这款手机上

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 3]

# 五、移动端浏览器及内核分析 #

#### PC端浏览器 ####

chrome、safari、firefox、IE

#### 移动端浏览器类型 ####

内置浏览器【手机到手后，手机厂商已经内置好的浏览器】

可下载浏览器【可自行下载的浏览器】

代理浏览器【知道】

webview【h5页面运行在app端内部的浏览器】

#### 内核 ####

> 浏览器内核：也称为渲染引擎或排版引擎，主要用于对网页语法进行解释，并进行网页渲染，将网页代码转换为看得到的页面。可分为两部分：渲染引擎和 js引擎。

Gecko内核,css前缀为"-moz-",代表 firefox  
WebKit内核,css前缀为"-webkit-"，代表 chrome、苹果、微信等  
Presto内核,css前缀为"-o-",代表Opera(欧朋)  
Trident内核,css前缀为"-ms-",代表IE

# 六、视口 #

视口分:

视觉视口： 眼在页面上看到的内容  
布局视口：写html代码时的布局宽高

#### 1、布局视口： ####

上述代码,在浏览器中的显示：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 4]

**如果把上述放在移动设备上预览会是什么样子呢？**

页面整体被压缩  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 5]

相同的内容，当窗口变窄，只是尽可能缩小网站来让用户看到网站的全貌。这对易读性来说不是件好事,在移动端上如何显示PC端的网页？

> 在移动端上，视口与移动浏览器屏幕宽度不再相关联，而是完全独立的，我们称它为布局视口

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 6]

实际为容纳桌面浏览器设计的网站，默认的布局视口宽度远大于手机屏幕的宽度

#### 3、理想视口 ####

默认情况下，一个手机或平板浏览器的布局宽度是在980px或1024px。虽然这能让桌面网站不被压扁，但是这并不理想，尤其对手机用户，因为在狭窄的屏幕上更适合一个狭窄的网站![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 7]  
那么，真正适合手机的视口是什么呢？？？？

**viewport理想视口**

*  布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)

#### 4、自定义用户代码片 ####

{ 
    	"html": { 
    		"prefix": "html",
    		"body": [
    			"<!DOCTYPE html>",
    			"<html>\n",
    			"<head>",
    			"\t<meta charset=\"UTF-8\">",
    			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\">",
    			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
    			"\t<title>Document</title>",
    			"\t<link rel=\"stylesheet\" href=\"$1\">",
    			"\t<script src=\"$2\"></script>",
    			"</head>\n",
    			"<body>\n$3",
    			"</body>\n",
    			"</html>"
    		],
    		"description": "The full sample code - html5."
    	}
    }

# 七、使用相对长度单位em布局网页内容 #

em是描述相对于当前对象内文本的字体尺寸，它是相对长度单位【**相对于父元素的fon-size值进行变化的**】。

一般浏览器字体大小默认为16px

适用场景：  
当适用首行缩进2个字的时候

#### 相对单位em的特性 ####

*  em的值并不是固定的
 *  em会继承父级元素的字体大小（相对父级的字体大小而发生变化）

实际应用中每次都这样去乘以父级的大小也是很麻烦的，有什么方法可以简化？

#### 如果1em等于10px， ####

那计算起来就方便了

body{
        font-size: 62.5%;
    }

# 八、12、相对单位rem #

使用em把像素向em进行换算的过程，有一点复杂

#### 相对单位rem的特性： ####

rem的值并不是固定的  
rem是相对根节点html发生变化的（和父节点无关）  
实际开发中一般默认的把html根节点设置为10px（62.5%）或者是100px，方便后续计算

#### 通过js动态实现尺寸自适应 ####

相对单位rem是集相对大小和绝对大小的优点于一身

通过它既可以做到只修改根元素字体大小就成比例地调整页面所有字体大小

又可以避免字体大小逐层复合的连锁反应

### 感谢支持：@快乐养兔 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70]: /images/20221022/1650a5f7cfbf4107be099db65aa78348.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 1]: /images/20221022/a5a154bc80fb40f2a19b5a98798d19c7.png
[20210409225906642.png]: /images/20221022/09173bea6b314e71a12d9587369693eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 2]: /images/20221022/aa2a79c1c6f948d8939104cf98d053bf.png
[20210409230349326.png]: /images/20221022/a7d62fc3c2134dee96a35d75466447ab.png
[2021040923041292.png]: /images/20221022/fca310a1687b4aaeb1f9e88e0ede2e07.png
[20210409230426789.png]: /images/20221022/19d9ad7abdb740309cbf8b1f62ac800b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 3]: /images/20221022/cd1431814a3b4ba3be24fe41863e3214.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 4]: /images/20221022/9a3887b1a125409098168dba585d35fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 5]: /images/20221022/7aa03430d17648bfb4e7d59d9fda5a78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 6]: /images/20221022/a70b961c023042df8a7ba71ea86e6702.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4ODM1NTk5_size_16_color_FFFFFF_t_70 7]: /images/20221022/096bfb1f7b204247b67bc646639ae05d.png