小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
一、什么是移动Web？
移动web，运行在移动设备上的页面网页
移动设备包括：手机、平板、地铁展示栏，商场的智能导航机器人其他的一些手持触摸设备等
产品分类
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做 ，分工明确
- 这种模式，可能就是以后工作中最经常要用到的
webview不需要我们来书写实现，安卓和ios内部已经有这个东西了，我们只需要把写好的h5页面传到服务器上，把服务器地址给安卓或ios工程师即可，由他们把我们的页面放入webview中
三、PC与移动web开发的区别
-
终端设备
-
输入特性
pc:靠键盘输入
移动端：软键盘、语音输入
-
屏幕
pc:分辨率差别不大，不论什么样的分辨率都需要版心放素材
移动端：移动设备屏幕大小分辨率各种各样层出不穷，需要兼容不同的屏幕
-
浏览器
浏览器差别大不，都是使用同样的内核，谷歌，ie等等
-
开发调试
移动端：
-
视口
-
布局视口
在写h5页面时候进行的布局分配
-
视觉视口
看到屏幕的样子
-
-
布局方式
我们前面学习的pc端的布局，浮动定位等等，在移动端同样适用
四、移动端屏幕
PPI
代表屏幕每英寸的像素数量，即像素密度 高PPI屏幕显示的元素会比较精细（看起来会比较小），低PPI屏幕显示的元素相对来说就比较粗糙（看起来会比较大）
像素分类:
-
设备像素(device independent pixels):
设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
-
CSS像素(CSS pixels):
又称逻辑像素，是为web开发者创造，在CSS和JavaScript中使用的一个抽象的层【就是我们自己书写的多少px的像素】
屏幕缩放
PC端：
css的1个像素往往都是对应电脑屏幕的1个物理像素
下图为4个CSS像素完全覆盖了4个设备像素
移动端：
由于屏幕尺寸的限制，缩放是经常性的操作 设备像素(深蓝色背景)、CSS像素(半透明背景)
缩小操作时，1个设备像素覆盖了多个CSS像素
放大操作时，1个CSS像素覆盖了多个设备像素
DPR：设备像素比
设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值
DPR = 设备像素 / CSS像素(某一方向上)
DPR值越大，屏幕分辨率越高
Retina屏幕
同样大小的屏幕上,像素多了一倍,DPR = 2
DPR=2的屏幕最早出现在苹果4s这款手机上
五、移动端浏览器及内核分析
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、布局视口：
<style>
header{height: 50px ; background: pink; margin-bottom: 10px;}
aside{width: 30%; background: red; height: 300px; float: left;}
article{width: 68%; background: pink; height: 300px; float: left;}
</style>
<body>
<header></header>
<aside></aside>
<article></article>
</body>
上述代码,在浏览器中的显示：
如果把上述放在移动设备上预览会是什么样子呢？
页面整体被压缩
相同的内容，当窗口变窄，只是尽可能缩小网站来让用户看到网站的全貌。这对易读性来说不是件好事,在移动端上如何显示PC端的网页？
在移动端上，视口与移动浏览器屏幕宽度不再相关联，而是完全独立的，我们称它为布局视口
实际为容纳桌面浏览器设计的网站，默认的布局视口宽度远大于手机屏幕的宽度
3、理想视口
默认情况下，一个手机或平板浏览器的布局宽度是在980px或1024px。虽然这能让桌面网站不被压扁，但是这并不理想，尤其对手机用户，因为在狭窄的屏幕上更适合一个狭窄的网站
那么，真正适合手机的视口是什么呢？？？？
viewport理想视口
- 布局视口宽度 = 视觉视口宽度 = 设备宽度( = 内容宽度)
<meta name="viewport" content="width=device-width, initial-scale=1.0 "/>;
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
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动态实现尺寸自适应
<script>
function setRem() {
var ui_w = 375;
// 获取屏幕的宽度
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(ui_w,clientWidth);
// 通过js动态改变html根节点字体大小
var html_ = document.getElementsByTagName('html')[0];
html_.style.fontSize = (clientWidth/ui_w)*100 +'px';
}
// window.onresize 浏览器被重置大小执行事件
window.onresize = setRem;
</script>
相对单位rem是集相对大小和绝对大小的优点于一身
通过它既可以做到只修改根元素字体大小就成比例地调整页面所有字体大小
又可以避免字体大小逐层复合的连锁反应
