Html5 布局经验分享-第1集

移动端的布局与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集；