移動端網頁重構指南-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;

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾 qq麻将十三幺 竞彩篮球大小分 163足球指数 手机上写小说赚钱的软件 北单比分预测 12岁小学怎么赚钱 意甲雪缘园 网络上手机录单赚钱吗 竞彩比分直播500万 体球 网络捕鱼输了很多钱 收老车赚钱吗 总进球 用户可以用头条号赚钱 北单比分奖金计算器 女装最赚钱