計量單位的使用
css的計量單位有三種選擇：
px: 固定的相素值
em: 相對父級元素的font-size設(shè)置來作為當前元素1em所代表的像素值，如父節(jié)點的font-size:10px近刘，當前節(jié)點的font-size:1.2em,則當前節(jié)點的font-size實為12px;
rem：相對根節(jié)點html的font-size設(shè)置來作為當前元素1rem所代表的像素值擒贸，與em的區(qū)別就是rem的基本度量單位與父節(jié)點無關(guān)，只與根節(jié)點font-size的設(shè)置有關(guān)觉渴，如設(shè)置html{font-size:10px;}后當前dom所有節(jié)點的1rem都表示10px;
移動端開發(fā)中我們使用rem作為基本計量單位介劫，同時將根節(jié)點默認字號大小設(shè)為font-size:62.5%,因移動端瀏覽器默認字號大小為16px;16*62.5%剛好為10px; 具體設(shè)置方法及使用示例
html{font-size:62.5%;/*剛好為10px;*/}#example{font-size:1.2rem}/*設(shè)置#example的字體大小為12px;*/#example?div{font-size:1.4rem;?width:10rem;height:10rem}/*設(shè)置#example子節(jié)點div的字體大小為14px;寬度為100px;高度100px*/
安卓下<textarea>標簽的內(nèi)容字體大小不支持rem設(shè)置，如有需要使用響應(yīng)式及px單位設(shè)置其字體大小疆拘，暫時還未找到具體原因
不同分辨率的終端
在對主流手機終端進行統(tǒng)計得出蜕猫，大部分手機的device-width為320px、360px哎迄、375px回右、384px、400px漱挚、414px翔烁，另外安卓pad的device-width為600px\800px。 手機屏幕分辨率寬度則在320px-1080px間旨涝，有少部分手機已經(jīng)達到1152px和1440px蹬屹。PS:ipad訪問移動端建議跳轉(zhuǎn)去對應(yīng)的PC頁面。
viewport設(shè)置
在移動端開發(fā)中，我們使用如下viewport設(shè)置
<!--viewport的設(shè)置--><meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=0">
注：device-width實際上并不等于設(shè)備寬度慨默，而是css寬度贩耐，它是根據(jù)設(shè)備屏幕寬度和屏幕像素密度換算得出的用于網(wǎng)頁顯示的css寬度
移動端設(shè)計稿750px*1134px的制作規(guī)范
css部分
/*reset.less*//*?CSS?Document?*/html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;??font-size:62.5%;}ul,li,div,p,body,h1,h2,h3,h4,h5,h6,dl,dt,dd{margin:0;padding:0;}li{list-style:none;}a{text-decoration:none;?color:?#2a2a2a;?}input{?-webkit-appearance:none;outline:none}
*{outline:?none;?webkit-focus-ring-color:?rgba(0,?0,?0,?0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}.hide{display:none;}body,?html?{width:?100%;?font-family:?"Microsoft?YaHei","Helvetica?Neue",Arial,?HelveticaNeue,?Helvetica,?"BBAlpha?Sans",?sans-serif;font-weight:?normal;display:?-webkit-box;-webkit-box-orient:?vertical;?-webkit-box-align:?center;}/*?*{-webkit-backface-visibility:?hidden;-moz-backface-visibility:?hidden;-ms-backface-visibility:?hidden;backface-visibility:?hidden;}?用于解決某些情況下出現(xiàn)閃屏的問題，若無則不加*/body{opacity:?1;-webkit-transition:opacity?500ms?ease-in;transition:opacity?500ms?ease-in;?}p,a,li{font-size:1.2rem;?color:#434343}html{?font-size:?312.5%;?}?
@media?screen?and?(max-width:359px)?and?(orientation:portrait)?{????html?{?font-size:?266.67%;?}?
}
@media?screen?and?(min-width:360px)?and?(max-width:374px)?and?(orientation:portrait)?{????html?{?font-size:?300%;?}?
}
@media?screen?and?(min-width:384px)?and?(max-width:399px)?and?(orientation:portrait)?{????html?{?font-size:?320%;?}?
}
@media?screen?and?(min-width:400px)?and?(max-width:413px)?and?(orientation:portrait)?{????html?{?font-size:?333.33%;?}?
}
@media?screen?and?(min-width:414px)?and?(max-width:431px)?and?(orientation:portrait){????html?{?font-size:?345%;?}
}
@media?screen?and?(min-width:432px)?and?(max-width:479px)?and?(orientation:portrait){????html?{?font-size:360%;?}
}
@media?screen?and?(min-width:480px)and?(max-width:639px)?and?(orientation:portrait){???html{?font-size:400%;}
}?
@media?screen?and?(min-width:640px)?and?(orientation:portrait){???html{?font-size:533.33%;}
}
例如750px設(shè)計稿上320px*200px字體大小為32px的區(qū)域樣式為：
html{?font-size:?312.5%;?}?
.div{????width:3.2rem;????height:2rem;????font-size:0.32rem????}
js部分
主要處理短屏下縮放厦取，以及初始化時固定頁面大小潮太，防止豎屏下彈出鍵盤或橫屏時頁面發(fā)生縮放的情況
?var?initScreen=function(callback){//初始化html??font-size
????????$("html").css("font-size",document.documentElement.clientHeight/document.documentElement.clientWidth<1.5???(document.documentElement.clientHeight/603*312.5+"%")?:?(document.documentElement.clientWidth/375*312.5+"%"));?//單屏全屏布局時使用,短屏下自動縮放
????????//$("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");//長頁面時使用,不縮放
????????if(callback)callback();
????}function?_onorientationchange(e){????if(window.orientation==90||window.orientation==-90){
????????$("#forhorview").css("display",?"-webkit-box");??//顯示豎屏瀏覽提示框
????}else{//豎屏下恢復默認顯示效果
????????var?st=setTimeout(initScreen,300);
?????????$("#forhorview").css("display",?"none");????
????}
????_resize(e);
}
$(function(){
????initScreen();????window.addEventListener("onorientationchange"?in?window???"orientationchange"?:?"resize",?????function(e){_onorientationchange(e);},?false);
})
html示例
<!doctype?html><html>
????<head>
????????<title>標題</title>
????????<meta?name="keywords"?content="關(guān)鍵字"?/>
????????<meta?name="description"?content="描述"?/>
????????<meta?name="format-detection"?content="telephone=no"?/>
????????<meta?name="format-detection"?content="address=no"?/>
????????<!--for?baidu?識別移動端頁面并禁止百度轉(zhuǎn)碼-->
????????<meta?name="applicable-device"content="mobile">?
????????<meta?http-equiv="Cache-Control"?content="no-transform"?/>
????????<meta?http-equiv="Cache-Control"?content="no-siteapp"?/>
????????<!--viewport?設(shè)置，如果頁面實際情況不允許縮放請加上,user-scalable=no-->
????????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=0">
????????<meta?name="apple-mobile-web-app-capable"?content="yes"?/>
????????<link?rel="stylesheet"?type="text/css"?href="css/index.less"?/>
????</head>
????<body>
????????<div?id="forhorview">
????????????<p>推薦使用豎屏瀏覽哦~</p>
????????</div>
????????<script?src="js/zepto.min.js"></script>
????</body></html>
移動端開發(fā)細節(jié)和優(yōu)化
在移動端使用新的css3樣式代替原來在PC上的開發(fā)習慣
新的布局實現(xiàn)方式:使用display:box虾攻、box-flex代替float\display：inline-block; 實現(xiàn)更強大铡买、更完美的流體布局，尤其在寬度為100%的布局中霎箍，實現(xiàn)橫向并排元素寬度的自動伸縮以及水平垂直居中平均分布奇钞、首尾分布排列等。
垂直居中的實現(xiàn)方式：使用display:-webkit-box;-webkit-box-align: center;實現(xiàn)垂直居中漂坏。
盡量使用border-radius景埃，box-shadow,text-shadow等css3樣式實現(xiàn)諸如圓角、漸變色樊拓、盒子投影纠亚、字體投影,減少使用圖片。
對于單色的icon圖標筋夏，我們將會整理出一套常用圖標，并制作成字體图呢，利用css3的@font-face使用自定義字體導入条篷，這樣的話，可以像修改字體一樣隨意地修改圖標的顏色蛤织、大小赴叹、背景色、特殊效果（如投影）等指蚜，而不再需要每一種顏色就需要切一份圖片乞巧。
利用-webkit-transform:rotate(90deg)來獲取旋轉(zhuǎn)了不同角度的icon，避免每個角度需要切一張圖片
在動畫中摊鸡，利用css3動畫屬性如-webkit-transform:translate(10px,12px)來改變元素的偏移位置绽媒，減少使用left和top來做位移動畫
