概述
随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。
移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。
【H5页面、微网页、微站、wap站、webAPP】
如:京东商城手机版，淘宝触屏版，苏宁易购手机版
相关阅读： WebApp与Native App的区别？ 在高端智能手机系统中有两种应用程序：一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp（基于WEB形式的应用程序） Native App： 1、开发成本非常大一般使用的开发语言为JAVA、C++、Objective-C 2.能调用系统的 api 优点是性能更好，实现的一些非常酷的交互效果,但是发布 app 流程繁琐，而且不跨平台。 3.更新体验较差（每一次发布新的版本，都需要做版本打包，且需要用户手动更新） Web App： 1、开发成本较低 使用web开发技术就可以轻松的完成web app的开发 2、升级较简单 升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉 3、维护比较轻松 和一般的web一样，维护比较简单 优点是跨平台，修改方便缺点是不能调用原生的 api, 而且用户体验不如原生 app 好
移动端浏览器及内核
移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等
国内用户首选使用移动浏览器的占比中：uc浏览器，qq浏览器，360浏览器，为用户手机浏览器平台首先前三位
内核：
对于安卓手机而言，使用率最高的就是webkit内核，国内目前尚无自主研发的内核，都是基于开源内核webkit上进行的二次开发，并不是完全的自主内核
对于苹果手机而言：由于系统封闭，不允许除苹果系统自带的浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均在Safari内核的基础上进行开发；
终端分为三个：pc iPad 移动端
移动端web开发现状
-
移动端浏览器大多基于webkit内核， 对H5+CSS3支持良好
-
手机的屏幕尺寸非常多，不同的移动设备有不同的屏幕尺寸、视口大小
设备的屏幕尺寸查询: https://uiiiuiii.com/screen/
我们开发的网页，在不同的手机上，若想展示效果一致，必然不是为每一种型号手机都开发一套页面，而是要尽可能的能适配所有
视口
了解视口相关概念及理想视口的设置 是移动Web开发非常重要环节。
什么是视口？
-
视口简单来说就是浏览器显示页面内容的区域。
-
视口：浏览器显示内容的屏幕区域，相当于PC端浏览器可视区 (白板区域)
-
在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；
视觉视口
【视觉视口是指用户当前看到区域】即设备宽度
布局视口
移动设备的浏览器都默认设置 了一个viewport元标签，定义了一个虚拟的布局视口，,CSS 布局将会根据它来进行计算，并被它约束。
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px
所以PC上的网页基本能在手机上呈现，只不过看上去很小，一般默认允许用户通过手动缩放、平移来查看网页。
不同设备大小也不相同由设备出厂设置决定，下图列出了一些设备上浏览器的默认viewport的宽度。
布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height
如果要显式设置布局视口，可以使用 HTML 中的 meta 标签进行设置
理想视口
布局视口对用户不友好，基于理想视口设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，网站的所有内容都可以正常的呈现给用户。
为了网站的移动端能有更好的浏览器和阅读而设置 （苹果公司引入的理想视口的概念）
理想视口可以使用 HTML 中的 meta 标签显式设置布局视口等于设备宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0"> 创建一个虚拟窗口，窗口宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放 content属性： - width 虚拟窗口的屏幕宽度 device-width 设备宽 - initial-scale 页面初始缩放比 - user-scalable 是否允许用户手动缩放 - user-scalable=no 不允许用户手动缩放 - user-scalable=yes 允许用户手动缩放，默认值 - maximum-scale 最大缩放比 - minimum-scale 最小缩放比 height : 设置viewport的高度（我们一般而言并不能用到 ） 常见的手机设置的大小 iphone4/5/SE 320 iphone6/7/8 375 iphone6plus、 iphone7plus、 iphone8plus 414
属性说明:
| width | 正整数或device-width | 定义视口的宽度，单位为像素 |
|---|---|---|
| height | 正整数或device-height | 定义视口的高度，单位为像素，一般不用 |
| initial-scale | [0.0-10.0] | 定义初始缩放比率 |
| minimum-scale | [0.0-10.0] | 定义最小缩放比例，它必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0-10.0] | 定义最大缩放比例，它必须大于或等于minimum-scale设置 |
| user-scalable | yes （1）/ no（0） | 定义是否允许用户手动缩放页面，默认值 yes |
移动端布局方案
3.1 流式布局（宽度自适应）
流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致
优点：
可以很好的来解决自适应的问题
缺点：
1、实际显示的效果不友好,屏幕越大，宽度被拉的很长，容易变形
2、大量使用百分比布局，会出现兼容性问题
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 50%;
height: 100px;
background-color: pink;
}
img {
width: 50%;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<img src="./images/Koala.jpg" alt="">
</body>
3.2 rem布局
-
rem是css3新增单位，它是相对于根元素的字号大小的单位
rem原理：
rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。
在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。
比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px
相对单位 : rem
html {
font-size:100px; //1rem = 100px
}
.box {
width:2rem;// 2*100 = 200px
height:3rem;//3*100 = 300px
font-size:1rem;//1*100 = 100px
}
-
rem布局的实现：
1、设置页面的viewport
2.动态计算并设置不同尺寸html的font-size属性
3.按照PC端布局方式正常布局，将px单位改为rem单位（较小 的长度比如1px的边框就不需要转换成rem,直接设置px）
// 1. 获取当前屏幕的宽度
// 2. 获取当前屏幕下html元素的字体大小;
// 3. 赋值
当前屏幕宽度字体基础值html = 当前屏幕宽度*预设字体基础值/psd设计稿的宽度;
320:当前屏幕宽度，设备宽度 deviceWidth
640：psd稿 desw
100：预设字体基础值1rem=100px
?: 当前屏幕宽度字体的基础值（html的font-size的值）currFontSize
320 ？
—— = ——
640 100
？=(320*100)/640
currFontSize=(deviceWidth*100)/desw
// 封装一个函数，这个函数的名字叫auto
function auto() {
// 获取当前屏幕的宽度
var deviceWidth = document.documentElement.clientWidth;
// 打印当前屏幕的宽度
console.log(deviceWidth);
//psd设计稿的宽度 假如设计稿就是750px
var desw = 750;
//手机屏幕 大于 设置稿 ,就按1:1的大小去做
if (deviceWidth > desw) {
deviceWidth = desw;
}
// 获取当前屏幕宽度字体的基础值
var currFontSize = (deviceWidth * 100) / desw
// 打印当前屏幕宽度html的font-size
console.log(currFontSize);
// 赋值 （给html设置font-size的值）
document.documentElement.style.fontSize = currFontSize + 'px';
// 表示获取 html
console.log(document.documentElement);
}
// 调用函数
auto();
//只要屏幕改变就调用auto函数
window.onresize = function () {
auto();
}
-
优点：
1.适用于偏APP类型的移动端页面
2.有利于手机端各种机型的适配
3.减少代码的重复性
-
缺点：
1.必须通过js来动态控制根元素的字体大小
在 Visual Studio Code 装一个插件: px to rem 文件--首选项--设置--搜索 px to rem --16改成100 转换px--rem或rem--px 捷键：alt +z（选中要换算的代码）
3.3 vw布局
使用纯css实现动态改变font-size属性值，不需要引用js文件
-
vw viewport's width 是css3规范中宽度视口单位，将视口宽度平均分成100份
-
vh viewport's height 将视口高度平均分成100份
-
原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px
100vw = 750px 1vw = 7.5px;
100vw = 375px 1vw = 3.75px
1px =0.1333333333333333vw
-
优点：页面元素随着页面宽度变化
-
缺点：
-
兼容性没有rem好 ,得大量计算， 不是很精确
-
转换后的长度单位不够直观修改维护困难
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1vw;
height: 1vw;
background-color: green;
}
.box1 {
/* width: 100px; */
width: 13.33vw;
/* 100*0.1333=5.332 */
height: 13.33vw;
/* height: 100px; */
background-color: pink;
}
</style>
</head>
<body>a
<div class="box"></div>
<div class="box1"></div>
<!-- /* 在移动端调试，点击responsive,调到750px */ -->
</body>
</html>
在 Visual Studio Code 装一个插件: px to vw
转换px--vw或vw--px 捷键：alt +z（选中要换算的代码）
注意：会给px-rem有冲突
3.4 vw + rem布局
确定基准值以常见的750px设计稿为例（宽度），根据vw单位和rem单位原理实现
在750px设计搞下，如果使用vw单位换算，可以理解成100vw = 750px，1px = 0.13333333vw；如果使用rem单位换算，预设1rem = 100px; 则100px = 13.333333vw html{ font-size: 13.333333vw; }
弊端 ： 不是很精确
750px 100vw 1vw = 7.5px;
375px 100vw 1vw = 3.75px
以设计稿为准:
假设还是750px设计稿 750px=100vw 1px=0.1333vw;
预设字体基础值 100px 1rem = 100px = 13.33vw;
html {
font-size:13.33vw;
}
.box1 {
width: 0.4rem;
height: 0.8rem;
background: pink;
}
/*width:40px;
height: 80px; */
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
