移动端web开发

相关阅读：
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 好

移动端web开发现状

移动端浏览器大多基于webkit内核， 对H5+CSS3支持良好
手机的屏幕尺寸非常多，不同的移动设备有不同的屏幕尺寸、视口大小

设备的屏幕尺寸查询:  https://uiiiuiii.com/screen/

我们开发的网页，在不同的手机上，若想展示效果一致，必然不是为每一种型号手机都开发一套页面，而是要尽可能的能适配所有

视口

视口简单来说就是浏览器显示页面内容的区域。
在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；
大多数为PC端设计的网站宽度至少为800px,为了不破坏没有针对移动设备优化的PC网页，移动端引入了视觉视口、布局视口、理想视口三个概念

视觉视口

【视觉视口是指用户当前看到区域】即设备宽度

布局视口

移动设备的浏览器都默认设置 了一个viewport元标签，定义了一个虚拟的布局视口，,CSS 布局将会根据它来进行计算，并被它约束。
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统
的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px
所以PC上的网页基本能在手机上呈现，只不过看上去很小，一般默认允许用户通过手动缩放、平移来查看网页。 

不同设备大小也不相同由设备出厂设置决定，下图列出了一些设备上浏览器的默认viewport的宽度。

 

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height
如果要显式设置布局视口，可以使用 HTML 中的 meta 标签进行设置

理想视口

布局视口对用户不友好，【基于理想视口设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，网站的所有内容都可以正常的呈现给用户】
理想视口 viewport设置：

<meta name="viewport"
          content="width=device-width,initial-scale=1.0,user-scalable=no">

上面代码将视口的宽度设置为屏幕宽度（设备逻辑像素），默认无缩放，并且也不允许用户缩放。

属性说明:

移动端【适配】方案 

由于手机屏幕尺寸、分辨率不同，还要要考虑横竖屏问题，为了使得web页面在不同移动设备上【实现尽可能统一或合理的展示效果】，需要在开发过程中使用合理的适配方
案。
常见的适配方案如下：

rem适配
rem单位介绍

Rem( font size of the root element) 是一个相对单位，相对于根元素的字号大小进行计算
大多数浏览器的默认字号是16px，因此默认1rem=16px。

rem布局原理

在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。
例：

.box{
      width:1rem;
      height:1rem;
}
@media screen and (min-width:320px){
      html{
            font-size:50px;
      }
}
@media screen and (min-width:480px){
      html{
            }
}

由于设备尺寸繁多需要设置密集的断点因此通过js动态计算并设置html的fontsize值是最常用的方式

rem适配实现

1）设置页面的viewport
2）以设计稿为基准值，1rem=100px,使用rem单位取代px常规布局。
3）换算不同设备尺寸下1rem的值，即改变不同尺寸下html 的font-size

<script>
      //获取html宽度（设备宽度）
      var deviceWidth = document.documentElement.clientWidth;
      // 750可以根据实际设计稿的宽度进行修改
      if(deviceWidth>750){ //假设设计稿为750
      deviceWidth = 750;
      }
      var fs = (deviceWidth*100)/750;
      document.documentElement.style.fontSize = fs + 'px';
</script>

以上代码假设基准值为设计稿，设计稿宽度为750px,如果页面宽度低于750px,那么页面中html的font-size也会按照（当前页面宽度/750）的比例变化。这样，页面中所有应用了
rem的作尺寸单位的元素都会随着页面变化而等比例缩放，从而达到适配。

关键步骤

设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

引入计算比例js,计算不同屏幕尺寸下1rem的大小
      换算比例时的基准值以设计稿为准 device-width/基准值

<script src="remscale.js"></script>

从设计稿量取px值转换成rem单位进行布局

100px* 100px
||
1rem 1rem

注：

//最外层的盒子居中处理
.wrap{
      max-width:6.4rem; //以设计稿为准
      margin:0 auto;
      height:500px;
      background-color: yellowgreen;
}

 vw适配

vw单位介绍

vw 即Viewport's width的简写，是css3规范中的视口单位，

相对单位
相对于视口大小

视口宽度 = 100vw ----> 1vw = 视口宽度1%

相对于视口的宽度，视口被均分为100单位的vw。

750px = 100vw
7.5px = 1vw

相关阅读：
除此之外还有vh单位 即Viewport's height，相对于视口的高度，视口高度被均分为100单位的vh。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

使用vw单位实现适配 

1vw 等于视窗宽度的1%，在页面布局中将px值换算成vw,
当视口宽度发生变化，则元素大小随即发生变化，实现页面适配

提示：可以借助插件自动计算
缺点：转换后的长度单位不够直观修改维护困难

步骤

设置一下基准值 
从设计稿量取px值直接布局
使用插件直接将px转换成vw

使用rem+vw单位实现适配

沿用rem布局方案，所有的布局元素及属性都用rem做单位,用vw单位设置html的font-size,这样就不再需要JS来动态计算根元素字体大小。

换算过程:
假设在750px的设计稿下，可以理解为100vw,对应750px
沿用rem布局方案中的html{font-size:100px}换算为vw那么 1vw = 7.5px
100px就是13.333333vw了

然后我们就可以在布局写rem单位了, 由于倍率是100,除以100,直接小数点向左移动2位,1rem是100px,那么10px就是0.1rem，不需要借助插件转换计算也可以直观的进行布局
了。