h5須要注意的地方

一、meta標籤，

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

二、字體大小，和高度

　　通常正文14px，標題16px，頂部header18px，

　　header高度和底部轉換工具條高度44px，按鈕高度42px

• 各個手機系統有本身的默認字體，且都不支持微軟雅黑
• 如無特殊需求，手機端無需定義中文字體，使用系統默認
• 英文字體和數字字體可以使用 Helvetica ，三種系統都支持

　　代碼：

/* 移動端定義字體的代碼 */
body{font-family:Helvetica;}

三、谷歌瀏覽器，手機下，就能夠

四、佈局，最好用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+ */ }

五、針對不一樣手機尺寸，最小min-width：320px，以蘋果5查看效果就能夠

六、切圖，只管按照設計上切就能夠了，後期經過background-size來控制大小.....

七、部署tomcat，能夠經過手機查看效果，這個本身尚未弄~~~

八、各類padding，margin%，能夠看看在正常模式下顯示效果，是縮放的差很少，上下padding，margin能夠用px