移动端的布局与pc端的布局相比 移动端的布局就简单的多，兼容性不必考虑那么多，css3各种特性基本上是可以放肆的写；（个人看法）
本人做移动web 布局一段时间了，把这其中遇到的一些问题总结下来，均是个人看法，各位大牛多多拍砖。。。。。
1.布局肯定使用的是自适应布局，前提是将body的width height 设置成100%；
2.准备好通用的reset.css，移除浏览器的默认样式，使用自定义默认样式，让各个浏览器统一基础样式；
3.准备好head内meta的各个标记，因为这个是必不可少的，下面是我常用的
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="#ffffff" name="msapplication-TileColor">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
4.在做布局前，先分析页面的结构，分层，在脑子里行程自己的思路
然后将一部分布局的结构写下来，写完结构后在写css布局和样式，这样会快很多，一块儿布局做完后再进行 预览 和调试，避免写一行就刷新一次页面看效果，很耽误时间；
5.页面两边留空指定宽度
一般的页面两边都会保留一些空白，这样看上去会自然一些，直接用div ，css 不设置他的宽度为100%, margin left right =10px 即可，如果设置为width：100%，那么就会将页面撑开,因为本身已经100%了，再加上外边距肯定就超出了；
6.定位用的是最多的了
position：absolute，position:fixed 用的是最多的，同样有些情况可以用float和margin来代替，通过调整margin的值的大小来调整元素的位置；
7.div内float元素，div的高度不会被撑起
如果div wraper内的元素是浮动的，你会发现外层的div的高度是没有的，我最常用的就是设置外层div的overflow：hidden；当然还有其他很多的办法；
8.微信内网页和浏览器里面显示的效果有些很大差异
a:input 设置了readonly后，apple上面点击input 不会弹出键盘，但是android手机上在微信里面打开网页后点击就会弹出键盘，在andorid浏览器内则不会弹出，最后的解决办法只能用span代替，很无奈，不知道有没有好办法；
b:微信内浏览，设置了position后div 内的数字，会被识别成手机号码 颜色也变了，当时找了很久不知道哪里的问题，因为也增加了meta，可根本不管用，一行一行的删，结果是设置了position的问题，最后进行了优化才算处理这个怪咖；
9.media 响应式
全战响应式到是不多，很多小的地方还是需要用到的，比如 一行提示信息需要不换行的显示，在6p上显示 ok，在p5上面就会换行，比如 在p5里面肯定显示会换行，所以需要用media来进行控制他的宽度；
10.页面的字体和大小好多都说用rem，本人还没用过这个东西，一直都是不设置他的字体大小，因为默认都是16px，小的字体就用14px，大点的就用18px，再自定义其他即可；
11.元素的click事件，在iphone上面会有延迟500ms，可以用fastclick插件解决，引入这个js后 带上这段代码，缓慢正症状瞬间不见勒
window.addEventListener(‘load‘, function() {
FastClick.attach(document.body);
}, false);
遗留问题：
1.在做一个im聊天页面的时候，消息输入框在页面最下面采用position：fixed定位到底部，但是在一些手机上经常出现 键盘弹出遮住输入框的情况，有的时候就不会出现，循环交替，通过js动态设置他页面的布局，但是效果不明显，苦苦无法解决，求高手解决！
以上是本人在开发中所见所得和所问，均为个人看法和观点，请高手们拍! 以后想到了其他的 再继续写第2集；