关于移动端
最近写了将近三个微信推广方面的项目,收获颇丰。在这里简单叙述一下对这三个单位的理解。
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里见到过,不过没有使用。用的是不同的页面,不过这个感觉性能不太好,接下来的项目准备用同一个页面试试。
一点小结。希望有所助益。