StuQ《Node.js微信开发》

第三周：h5和weui实践

h5基础

viewport

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

这个必须设置，viewport翻译过来叫适口，它指定了h5页面的宽度和手机的宽度一样，而且初始化没有放大，是按1：1显示的。

事件：touch和click的区别

在web里只有click，而移动端既有click又有touch，所以问题就来了

我怎么样区分它们呢？

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：

touchstart ：手指放在一个DOM元素上。
touchmove ：手指拖曳一个DOM元素。
touchend ：手指从一个DOM元素上移开。

其实还有一个touchcancel

其实click也是touch，不过先识别一下，如果是touch就是touch，如果不是touch就当click处理。

结论肯定是touch反应比click快，所以移动的有一个比较好的实践

使用zeptojs的tap的手势
使用fastclick库

通过CSS3 Media Query实现响应式Web设计

http://www.w3.org/TR/css3-mediaqueries/#media1

CSS3中的media query属性让我们可以根据浏览器的高宽，设备的像素比等来使用不同的CSS。当然它还一些别的用法，具体请参考这里。

比较有名是bootstrap和foundation

Bootstrap支持的Media Query分类5种

大屏幕大于或等于1200px 70px 30px 默认大于或等于980px 60px 20px
平板电脑大于或等于768px 42px 20px
手机到平板电脑小于或等于767px 流式列，无固定宽度
手机小于或等于480px 流式列，无固定宽度

具体样式结构如下：

/* 大屏幕 */
@media (min-width: 1200px) {
}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {
}
/* 横向放置的手机和竖向放置的平板电脑之间的分辨率 */
@media (max-width: 767px) {
}
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
}

图片处理(高清屏下图片处理)

device-pixel-ratio是media query一查询条件，用于获得设备的像素比。一般来说iPhone4/4s的值是2，高分辨率的Andriod设备是1.5，一般设备是1，有了这些条件，我们就可以为不同的设备提供不同分辨率的图片了。

事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px100px，当像素比为1.5时，载入150px150px的图片，当像素比为2.0，载入200px*200px的图片。

来个例子

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>利用media query让背景图适应不同分辨率的设备</title>
<style>
       /* 像素比为1，链入100px的图片， background-size：100% */
       .header { background: url(Logo_1.png) no-repeat; }
       /*像素比为1.5，链入150px的图片， background-size：1/1.5=66.7% */
       @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
           .header { background: url(Logo_1-5.png) no-repeat; background-size:66.7%; }
       }
       /*像素比为2，链入200px的图片， background-size：1/2=50% */
       @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
           .header { background: url(Logo_2-0.png) no-repeat; background-size: 50%;}
       }
       .w100{width:100px;height:100px;}
   </style>
</head>
<body></body>
</html>

我其实还想告诉更简单的办法：layzr.js

https://github.com/callmecavs/layzr.js