h5需要注意的地方

1、meta标签，

　　<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

2、字体大小，和高度

　　一般正文14px，标题16px，顶部header18px，

　　header高度和底部转换工具条高度44px，按钮高度42px

• 各个手机系统有自己的默认字体，且都不支持微软雅黑
• 如无特殊需求，手机端无需定义中文字体，使用系统默认
• 英文字体和数字字体可使用 Helvetica ，三种系统都支持

　　代码：

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

3、谷歌浏览器，手机下，就可以

4、布局，最好用flex，不用给宽度，百分比有时容易掉下来，兼容性写法

.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

5、针对不同手机尺寸，最小min-width：320px，以苹果5查看效果就可以

6、切图，只管按照设计上切就可以了，后期通过background-size来控制大小.....

7、部署tomcat，可以通过手机查看效果，这个自己还没有弄~~~

8、各种padding，margin%，可以看看在正常模式下显示效果，是缩放的差不多，上下padding，margin可以用px