移動WEB前端開發資源整合

meta相關:html

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>

CSS相關:web

   -webkit-overflow-scrolling:touch;快速滾動和回彈的效果,看上去和原生app的效率都有得一拼。-webkit-overflow-scrolling建立了帶有硬件加速的系統級控件,因此效率很高。可是這相對是耗更多內存的,最好在產生了很是大面積的overflow時才應用。瀏覽器

 移動端字體app

body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用無襯線字體*/}

 禁止長按連接與圖片彈出菜單字體

a, img { -webkit-touch-callout: none; }
防止點擊高亮,能夠經過給a標籤或者body,html加 
-webkit-tap-highlight-color:transparent;

 -webkit-appearance屬性,來改變任何元素的瀏覽器默認風格spa

appearance:none|normal|icon|window|button|menu|field;
去掉webkit默認的表單樣式
button,input,optgroup,select,textarea {-webkit-appearance:none; }
禁止選中文本
-webkit-user-select: none;

 去掉a、input和button點擊時的藍色外邊框和灰色半透明背景scala

a,button,input,optgroup,select,textarea {-webkit-tap-highlight-color:rgba(0,0,0,0); }

 修改input的planceholder樣式code

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

 修改表單獲取焦點時的樣式orm

input[type=text]:focus, input[type=password]:focus { border: 2px solid#f00;outline: none;}

 用CSS實現省略號文字截斷htm

white-space: nowrap;text-overflow: ellipsis;
相關文章
相關標籤/搜索