关于移动端的一点理解

关于移动端

最近写了将近三个微信推广方面的项目，收获颇丰。在这里简单叙述一下对这三个单位的理解。

header

由于微信是纯手机端页面，故而没有考虑pc端的响应。写微信页面，首先要引入一串响应式必备**meta**代码如下：

<meta name="author" content=""> 
<meta name="description" content=""> 
<meta name="viewport" content="minimal-ui"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 
<!-- Force latest IE rendering engine & Chrome Frame --> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

单位

接下来就是布局问题了，响应式布局不能用固定的单位来写，然后查了很多资料，移动端对于H5和css3的支持还是比较好的，所以可以用比较激进的vh和vw来布局，不过由于经验尚浅，第一个项目的时候布局就出现bug了，大的小的块都用vw和vh，然后就造成大屏幕手机端在微信浏览器上看的时候出现一堆bug，后来总结了一点小小的经验：

父元素，如header，footer用vw来布局，内含元素用百分比来布局。宽度、高度百分比分别占父元素的，当然，前提是父元素要有宽高。

---

滑页

页面滑动可以有两个方法，一个是不同的页面进行切换，一个是写在一个页面里面。
写在同一个页面我在jqM里见到过，不过没有使用。用的是不同的页面，不过这个感觉性能不太好，接下来的项目准备用同一个页面试试。

一点小结。希望有所助益。