計量單位的使用
css的計量單位有三種選擇：
px: 固定的相素值
em: 相對父級元素的font-size設定來作為當前元素1em所代表的畫素值，如父節點的font-size:10px，當前節點的font-size:1.2em,則當前節點的font-size實為12px;
rem：相對根節點html的font-size設定來作為當前元素1rem所代表的畫素值，與em的區別就是rem的基本度量單位與父節點無關，只與根節點font-size的設定有關，如設定html後當前dom所有節點的1rem都表示10px;
移動端開發中我們使用rem作為基本計量單位，同時將根節點預設字型大小大小設為font-size:62.5%,因移動端瀏覽器預設字型大小大小為16px;16*62.5%剛好為10px; 具體設定方法及使用示例
html
#example/*設定#example的字型大小為12px;*/
#example div/*設定#example子節點div的字型大小為14px;寬度為100px;高度100px*/
安卓下標籤的內容字型大小不支援rem設定，如有需要使用響應式及px單位設定其字型大小，暫時還未找到具體原因
不同解析度的終端
在對主流手機終端進行統計得出，大部分手機的device-width為320px、360px、375px、384px、400px、414px，另外安卓pad的device-width為600px\800px。 手機螢幕解析度寬度則在320px-1080px間，有少部分手機已經達到1152px和1440px。ps:ipad訪問移動端建議跳轉去對應的pc頁面。
viewport設定
在移動端開發中，我們使用如下viewport設定
注：device-width實際上並不等於裝置寬度，而是css寬度，它是根據裝置螢幕寬度和螢幕畫素密度換算得出的用於網頁顯示的css寬度
移動端設計稿750px*1134px的製作規範
css部分
/*reset.less*/
/* css document */
html
ul,li,div,p,body,h1,h2,h3,h4,h5,h6,dl,dt,ddlia
*.hide
body, html
/* * 用於解決某些情況下出現閃屏的問題，若無則不加*/
body
p,a,li
html
@media screen and (max-width:359px) and (orientation:portrait)
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait)
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait)
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait)
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait)
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait)
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait)
@media screen and (min-width:640px) and (orientation:portrait)
例如750px設計稿上320px*200px字型大小為32px的區域樣式為：
html
.divelse, false);
html示例
標題 推薦使用豎屏瀏覽哦~
移動端開發細節和優化
在移動端使用新的css3樣式代替原來在pc上的開發習慣
新的布局實現方式:使用display:box、box-flex代替float\display：inline-block; 實現更強大、更完美的流體布局，尤其在寬度為100%的布局中，實現橫向併排元素寬度的自動伸縮以及水平垂直居中平均分布、首尾分布排列等。
垂直居中的實現方式：使用display:-webkit-box;-webkit-box-align: center;實現垂直居中。
盡量使用border-radius，box-shadow,text-shadow等css3樣式實現諸如圓角、漸變色、盒子投影、字型投影,減少使用。
對於單色的icon圖示，我們將會整理出一套常用圖示，並製作成字型，利用css3的@font-face使用自定義字型匯入，這樣的話，可以像修改字型一樣隨意地修改圖示的顏色、大小、背景色、特殊效果(如投影)等，而不再需要每一種顏色就需要切乙份。
利用-webkit-transform:rotate(90deg)來獲取旋轉了不同角度的icon，避免每個角度需要切一張
在動畫中，利用css3動畫屬性如-webkit-transform:translate(10px,12px)來改變元素的偏移位置，減少使用left和top來做位移動畫
h5移動端適配
原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...
移動端h5優化
1 減少js載入體積 很多庫能用cdn的盡量使用cdn，這樣打包出來的js體積會很小，載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui，mintui等 4 儘量減少網路請求數量 程式中的資料，有的能乙個介面返回的盡量乙個介面返回，不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...
移動端H5除錯
背景 開發pc頁面的時候使用chrome瀏覽器的開發者工具，可以很容易的捕獲到頁面的dom元素，並且可以修改樣式，方便除錯 但是手機上卻很麻煩，因為手機上沒有辦法直接開啟開發者工具檢視元素。其實可以通過將裝置連線到pc，使用pc的開發者工具檢測。fiddler抓包工具 fiddler是強大的抓包工具...