隨著移動設(shè)備的普及和網(wǎng)頁設(shè)計趨勢的變化,越來越多的網(wǎng)站開始關(guān)注移動端的優(yōu)化,在移動端網(wǎng)頁設(shè)計中,有一個重要的前置工作,那就是移動端css初始化。
所謂的移動端css初始化,就是一份規(guī)范的樣式代碼,并且可用于所有移動設(shè)備,目的是讓各個瀏覽器渲染出的頁面效果基本一致。
下面是一個簡單的移動端css初始化代碼:
/* 移動端CSS */ html,body {height:100%;font-size:62.5%;} body {font-family:"Helvetica Neue",Helvetica,"Microsoft Yahei",Arial,sans-serif;} a {text-decoration:none;color:#333;} input,textarea {outline:none;border:none;resize:none;-webkit-appearance:none;} /* 清除浮動 */ .clearfix:after {content:"";display:block;height:0;clear:both;visibility:hidden;} .clearfix {display:inline-block;} html[xmlns] .clearfix {display:block;} *html .clearfix {height:1%;}
這段代碼中,首先設(shè)置了html和body元素的高度為100%,并將字體大小設(shè)置為10px,這樣以后的計算比例會相對方便。同時,將字體設(shè)置為“Helvetica Neue”,“Microsoft Yahei”等常見字體,以保證不同設(shè)備瀏覽器的字體一致性。
其次,為a標簽、input和textarea去除下劃線和邊框,并禁止調(diào)整文本域大小。這對于移動設(shè)備來說是很重要的。
最后,加入了清除浮動的代碼,由于移動設(shè)備屏幕較小,部分元素需要浮動排列,但較多的浮動往往會帶來很多問題。該代碼可避免浮動元素的高度被內(nèi)部內(nèi)容撐起,從而造成頁面錯位的問題。
移動端css初始化是實現(xiàn)移動端網(wǎng)頁設(shè)計的必要步驟,上面的代碼只是一個示例,具體的代碼可以根據(jù)項目需求進行調(diào)整。