本文主要介紹移動重構css相關部分，包括編碼、字型、touch相關、硬體加速、相容問題等。 1
@charset
"utf-8"
; 1
2
3
body
12
3
4
5 *,
*:before,*
:after
12
3
4 e
android3+和ios5+支援css3的新屬性為overflow-scrolling
1
2
3
4
5
6
e
解決移動裝置可選中頁面文字(視產品需要而定) 1
2
3 e
12
3
e 1
2
input::-
webkit
-input
-placeholder
input
:focus::-
webkit
-input
-placeholder
placeholder的文字在ios下可以換行，android不行
1
2
3
e
設定alpha值為0就可以去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。 1
<
body
ontouchstart=""
>
12
3
4
e
注意：3d變形會消耗更多的記憶體與功耗 1
2
3 e
某些低端手機不支援css3 mask，可以選擇性的降級處理。
比如可以使用js判斷來引用不同class：
1
2
3
4
5 if(
'webkitmask'
indocument
.documentelement
.style
)else
12
3
html
,body
,form
,fieldset,p
,div,h1
,h2,h3
,h4,h5
,h61
2
3
4
5
/*設定內嵌的元素在 3d 空間如何呈現：保留3d */
-webkit
-transform
-style
:preserve-3d
;
/* 設定進行轉換的元素的背面在面對使用者時是否可見：隱藏 */
-webkit
-backface
-visibility
:hidden
;
某些android手機圓角失效 1
background
-clip
:padding
-box;
慎用box-shadow和gradients
box-shadows與gradients往往都是頁面的效能殺手，尤其是在乙個元素同時都使用了它們。
盡可能讓動畫元素不在文件流中，以減少重排(reflow)。可以使用絕對定位。position: absolute;
以下四個屬性對動畫的效率較高, 可以充分利用
參考：
移動端 網頁布局
固定寬度布局 為網頁設定乙個固定的寬度，通常以 px 做為長度單位，常見於 pc 端網頁。流式布局 為網頁設定乙個相對的寬度，通常以百分比做為長度單位。柵格化布局 將網頁寬度人為的劃分成均等的長度，然後排版布局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來劃分成均等的長度。響應式布局...
移動端網頁製作
一 header資訊的設定 自適應 1 宣告資訊 2 編碼設定 3 移動裝置特別設定 重要宣告！meta content width device width,user scalable no name viewport viewport說明 該設定可使我們開發出的頁面 產品 大小可適應各種高階移動...
移動端重構系列8 滾動
本系列文章，如果沒有特別說明，相容安卓4.0.4 原生滾動的屬性為 webkit overflow scrolling touch 如果是走高富帥的蘋果路線，是沒問題的，誰讓這是人家親生的呢 如果是安卓的話，我真不知道是支援還是不支援，說不支援吧好像有點緩動效果，說支援吧好像把這條屬性砍掉也一樣，感...