移動端網頁重構指南-CSS篇

2016-11-11 1371 0 編輯:網頁前端設計伍林 來源:網站開發書籍

本文主要介紹移動重構CSS相關部分,包括編碼、字體、touch相關、硬件加速、兼容問題等。

基礎篇

編碼

@charset "UTF-8";

字體設置

body { 

    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 

}

盒模型

*, *:before, *:after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

上下拉動滾動條時卡頓、慢

E {

    -webkit-overflow-scrolling: touch;

    overflow-scrolling: touch;

}

Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling

禁止復制、選中文本

E {

    -webkit-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

     user-select: none;

}

解決移動設備可選中頁面文本(視產品需要而定)

長時間按住頁面出現閃退

E {

    -webkit-touch-callout: none;

}


iphone及ipad下輸入框默認內陰影

E {

    -webkit-appearance: none; 

}

更改輸入框placeholder的顏色

input::-webkit-input-placeholder { color:#999; }

input:focus::-webkit-input-placeholder { color:#333; }

placeholder的文字在ios下可以換行,android不行

ios和android下觸摸元素時出現半透明灰色遮罩

E {

    -webkit-tap-highlight-color:rgba(255,255,255,0)

}

設置alpha值為0就可以去除半透明灰色遮罩,備注:transparent的屬性值在android下無效。

active兼容處理

<body ontouchstart="">

動畫定義3D啟用硬件加速

E {

    -webkit-transform:translate3d(0, 0, 0)

    transform: translate3d(0, 0, 0);

}

注意:3D變形會消耗更多的內存與功耗

Retina屏的1px邊框

E {

    border-width: thin;

}

webkit mask 兼容處理

某些低端手機不支持css3 mask,可以選擇性的降級處理。

比如可以使用js判斷來引用不同class:

if( 'WebkitMask' in document.documentElement.style){

    alert('支持mask');

} else {

    alert('不支持mask');

}

旋轉屏幕時,字體大小調整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

    -webkit-text-size-adjust:100%;

}

transition閃屏

/*設置內嵌的元素在 3D 空間如何呈現:保留3D */ 

-webkit-transform-style: preserve-3d; 

/* 設置進行轉換的元素的背面在面對用戶時是否可見:隱藏 */

-webkit-backface-visibility:hidden;

圓角bug

某些Android手機圓角失效

background-clip: padding-box;

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾