隨著移動設備的普及和網頁設計趨勢的變化,越來越多的網站開始關注移動端的優化,在移動端網頁設計中,有一個重要的前置工作,那就是移動端css初始化。
所謂的移動端css初始化,就是一份規范的樣式代碼,并且可用于所有移動設備,目的是讓各個瀏覽器渲染出的頁面效果基本一致。
下面是一個簡單的移動端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%;}
這段代碼中,首先設置了html和body元素的高度為100%,并將字體大小設置為10px,這樣以后的計算比例會相對方便。同時,將字體設置為“Helvetica Neue”,“Microsoft Yahei”等常見字體,以保證不同設備瀏覽器的字體一致性。
其次,為a標簽、input和textarea去除下劃線和邊框,并禁止調整文本域大小。這對于移動設備來說是很重要的。
最后,加入了清除浮動的代碼,由于移動設備屏幕較小,部分元素需要浮動排列,但較多的浮動往往會帶來很多問題。該代碼可避免浮動元素的高度被內部內容撐起,從而造成頁面錯位的問題。
移動端css初始化是實現移動端網頁設計的必要步驟,上面的代碼只是一個示例,具體的代碼可以根據項目需求進行調整。