移动Web初级入门

最好的阅读是输出。 –玉伯

即将开始涉入移动Web了，有点小兴奋也有点小紧张，但愿能在将来的团队里带来一些价值。记录一下我如今所认识的移动Web。

原文摘自个人前端博客，欢迎你们来访问

原文地址：http://www.hacke2.cn/hello-mobile-aop/

一些基本名词

初涉移动Web，会有一些基本的名称须要掌握，什么设备像素比呀，移动端Web的内核呀，viewport呀，屏幕的的最小物理单位呀。我已经记录了一些，之后还得继续补充。

• - 常见移动Web名词

关于布局

咱们来看看移动端最多见的布局：

上中下三部分布局

下面实现上述页面常见移动Web布局三种方法：

• fixed
• absolute
• flexbox

fixed

对于第一种布局，其实现原理就是header和footer部分都为fixed定位。内容页面可使用-webkit-overflow-scrolling:touch来进行滚动，固然，对于不支持的，也可使用iscroll来兼容。 fixed布局网上人说坑太多，滚动的时候bug太多，特别是表单元素时弹出输入法会有不少问题，因此不建议使用，如下是一些网上参考的资料：

• - 移动Web开发实践——解决position:fixed自适应BUG
• - 移动端web页面使用position:fixed问题总结
• - 移动Web开发，4行代码检测浏览器是否支持position:fixed

absolute

和fixed同样，只不过将fixed定位设为绝对定位。设定其left,right等值。下面有一个绝对定位的DEMO。

• - 绝对定位的DEMO

flexbox

flexbox布局我估计是仿照flex*布局方式。因为主流移动端都使用的现代浏览器都支持这个CSS3属性。Flexbox布局俗称伸缩布局，它能够简单快速的建立一个具备弹性功能的布局。因为移动多终端的需求，因此首选是flexbox。

• - flexbox的DEMO
• - [译]flexbox全揭秘

图片与文字

非背景图片

以前提到的常见移动Web名词，设备像素比：2的高清视网膜技术却会使图片变得模糊，这是为何呢？

中密度与超高密度(retina)显示的区别

根据计算公式，一个像素点会被拆分红4个小点，显示起来天然模糊了。

解决方案通常有两个：

1.设置target-densitydpi=device-dpi，采用按照真实比例来展现，而后进行媒体查询技术以下面代码：

#header {
background:url (medium-density-image.png);
}
@media screen and (- webkit -device-pixel-ratio:1.5) {
/* CSS for high-density screens */
#header { background:url (high-density-image.png);}
}
@media screen and (- webkit -device-pixel-ratio:0.75) {
/* CSS for low-density screens */
#header { background:url (low-density-image.png);}
}

 

这样有一个弊端就是：须要为每一种分辨率书写单独的代码。

1. 假如须要100×100的图片，那么从设计稿(宽为640)上截取200×200的大小，但设置仍是100*100。宽720的设计稿 ，为了知足显示像素为360的屏幕。这样就能够来只有一份设计稿只写一份代码了。

另外，多张图片的显示能够进行canvas的绘制，进行GPU渲染。。

背景图片

background-size设置为高度，自适应宽度100%，这也是CSS3的属性。

文字

px单位

传统PC端经常使用的px来设置大小。由于他比较稳定和精确。

em单位

浏览器中放大或缩放浏览页面时会存在一个问题，由于字体大小是固定了的。要解决这个问题，咱们可使用“em”单位。 em有以下特色：

1. em的值并非固定的;
2. em会继承父级元素的字体大小。

rem单位

rem是CSS3的属性，和em同样，他的值是不固定的。区别在于他参考的是一个根元素的肯定值。em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能须要知道他父元素的大小，在咱们屡次使用时，就会带来没法预知的错误风险。而rem是相对于根元素html，这样就意味着，咱们只须要在根元素肯定一个参考值。

在了解了px,em,rem的区别后，咱们能够进行以下设置：

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; }

 

咱们在写大小的时候经过一些简单的计算就能够了，好比的拿到的设计稿有一一部分为18px的文字，那咱们在写代码的时候就能够写：

p : {font-size:18px；font-size:1.8rem}/*(1.8 x 10=18)*/

 

动画

在移动端不用过多考虑平台端的兼容性，完成动画也是借助CSS3的动画来实现。

在我看来，移动端动画优先选择为如下顺序：

transition > Animation > js

并且最好使用translate3d强制设备进行GPU渲染，但也不能过分使用。 咱们可使用CSS3动画库animate.css玩完成常见的动画。更多关于CSS3动画的能够参考：

• - CSS动画简介

一些事件

移动端原生的最重要的事件touch ：

• touchstart
• touchmove
• touchend
• touchcancel

其中，他们之间触发的前后顺序为：

touchstart > touchmove > touchend > click

移动端click会延迟300ms，缘由是他在等待判断是否是双击。固然，如今的一些框架解决了这个问题：

• - fastclick
• - tap.js

用这几个事件能够衍生出不少事件，好比左滑右滑，上下滑屏，放大，缩放等。详情能够看指尖上的JS系列。

• - 指尖下的js ——多触式web前端开发之一：对于Touch的处理
• - 指尖下的js ——多触式web前端开发之二：处理简单手势
• - 指尖下的js —— 多触式web前端开发之三：处理复杂手势

如今已经有一些封装了的框架：

• - hammer.js
• - touch.js

固然还有其余移动端专属的事件，好比：

• 触摸事件
• 屏幕旋转事件

我用原生JS模仿了神马搜索搜出美团后的信息轮播：

• - 移动端访问

一些框架

移动端有一些较为成熟框架：

• - JQuery Mobile
• - JQTouch

一些公司也有本身的框架

• - 腾讯Prohttps://github.com/AlloyTeam/Pro)
• - 百度BlendUI

但更多公司选择使用一些基础的类库本身封装一些常见的交互，毕竟在移动端上流量真的是寸土必争。好比神马搜索用的是zepto.js。经过gzip压缩后只有几k，并且风格与JQ如出一辙，无学习成本。

固然还有些为工具框架

• - iscroll4

参考资料

• jtyjty99999收集移动端开发所须要的一些资源与小技巧
• [译]flexbox全揭秘
• 移动端重构系列3——总体布局
• 移动端webapp开发必备知识
• CSS3的REM设置字体大小
• 设备像素比devicePixelRatio简单介绍
• 使用CSS3开启GPU硬件加速提高网站动画渲染性能