[總結]CSS/CSS3經常使用樣式與web移動端資源

時間 2019-11-06

標籤總結 css css3 經常使用樣式 web 移動資源欄目 CSS 简体版

原文原文鏈接

`css/css3經常使用樣式`

CSS修改選中文字的顏色

html代碼：javascript

<p class="p1">第一段文字選中效果</p>
<p class="p2">第二段文字選中效果</p>

css代碼：php

.p1::selection{background:red;color:#fff;}
.p2::selection{background: black;color:red;}

選中文字後的效果如圖所示：
css

強制文本顯示

單行顯示語法：white-space:nowrap;
讓一段文字在固定寬度在一行顯示，最後一個字符爲省略標記(...)，css樣式以下html

div{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

多行文本最後省略號：前端

div{
  display: -webkit-box; 
  -webkit-line-clamp:2;
  overflow: hidden; 
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

這裏用到了文本溢出顯示省略號的，即設置溢出文本顯示爲省略標記：java

語法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增長的）;android

clip：表示直接裁切溢出的文本；ios
ellipsis：表示文本溢出時，顯示省略標記(...)，省略標記代替最後一個字符；css3
ellipsis-word：表示文本溢出時，也是顯示省略標記(...),不一樣的是，省略標記代替的是最後一個詞)git

zoom:1的原理和做用

語法：zoom：normal | <number> | <percentage>
取值：

normal：使用對象的實際尺寸。
<number>：用浮點數來定義縮放比例。不容許負值
<percentage>：用百分比來定義縮放比例。不容許負值

兼容性：

例子：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>zoom_CSS參考手冊_web前端開發參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
body{line-height:1.5;}
h1{margin:0;font-size:16px;font-family:Arial;}
.test{zoom:normal;}
.test2{zoom:5;}
.test3{zoom:300%;}
</style>
</head>
<body>
<h1>zoom:normal</h1>
<div class="test">zoom:normal</div>

<h1>zoom:5</h1>
<div class="test2">zoom:5</div>

<h1>zoom:300%</h1>
<div class="test3">zoom:300%</div>
</body>
</html>

谷歌與IE瀏覽器結果如圖所示（Firefox不支持）：

參考地址：http://www.css88.com/book/css/properties/user-interface/zoom.htm

Zoom屬性是~~IE瀏覽器的專有屬性~~，它能夠設置或檢索對象的縮放比例。

在日常的css編寫過程當中，zoom:1可以比較神奇地解決ie下比較奇葩的bug。

譬如外邊距（margin）的重疊，譬如浮動的清除，譬如觸發ie的 haslayout屬性等等。

（重點）當設置了zoom的值以後，所設置的元素就會擴大或者縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。

ie下子元素浮動時候父元素不隨着自動擴大的問題，使用下面的CSS寫法：

.父元素 {   overflow: auto; zoom: 1   }

css ie六、ie7中overflow:hidden無效解決辦法

產生緣由：
當父元素的直接子元素或者下級子元素的樣式擁有position:relative 屬性時，父元素的overflow:hidden 屬性就會失效。

解決辦法：
咱們在IE 六、7 內發現子元素會超出父元素設定的高度，即便父元素設置了overflow:hidden。
解決這個bug很簡單，在父元素中使用 *position:relative; 便可解決該bug。

表格語法

<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合併欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合併列的列數(使用數字)

設置表格中的td寬度固定table-layout:fixed

table{table-layout:fixed;}

語法：table-layout:automatic | fixed | inherit

automatic：默認。列寬度由單元格內容設定。
fixed：列寬由表格寬度和列寬度設定。
inherit：規定應該從父元素繼承 table-layout 屬性的值。

合併表格邊框border-collapse:collapse

table{border-collapse:collapse;}

語法：border-collapse:separate | collapse | inherit

separate：默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse：若是可能，邊框會合併爲一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit：規定應該從父元素繼承 border-collapse 屬性的值。

例如：

table{border-collapse:collapse;}
table, td, th{border:1px solid black;}

CSS text-transform控制文本的大小寫

描述：text-transform 屬性控制文本的大小寫。

語法：text-transform:none | capitalize | uppercase | lowercase | inherit

none 默認。定義帶有小寫字母和大寫字母的標準的文本。
capitalize 文本中的每一個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。

text-stroke

[ text-stroke-width ]：設置或檢索對象中的文字的描邊厚度
[ text-stroke-color ]：設置或檢索對象中的文字的描邊顏色

text-stroke(文本描邊)和text-fill-color(文本填充色)注意點：

目前這兩個屬性只有webkit內核的Safari和Chrome支持，例如：

.box{-webkit-text-stroke: 3.3px #2A75BF;}

text-fill-color：顏色值，和color屬性差很少都是文字的樣式；

注意：同時使用text-fill-color和color屬性，text-fill-color將覆蓋color屬性的顏色值；

text-fill-color可使用透明值，即：text-fill-color：transparent

text-shadow

.box{text-shadow:0px 0px 0px #333333;}

屬性值依次：水平方向位移（支持負值）、垂直方向位移（支持負值）、模糊半徑、陰影顏色
text-shadow對同一個text，可設置多個陰影，與box-shadow相似，使用逗號","分割，前一個設置效果在後一個設置效果之上。
box-shadow 參考：http://www.cnblogs.com/lhb25/...

box-shadow

爲了兼容各主流瀏覽器並支持這些主流瀏覽器的較低版本，在基於Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時，咱們須要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則須要寫成-moz-box-shadow的形式。全面的寫法：

.box-shadow-6{  
    box-shadow:-10px 0 10px red, /*左邊陰影*/  
    10px 0 10px yellow, /*右邊陰影*/  
    0 -10px 10px blue, /*頂部陰影*/  
    0 10px 10px green; /*底邊陰影*/  
}

參考地址：http://blog.csdn.net/freshlov...

letter-spacing字符間距

letter-spacing 屬性增長或減小字符間的空白（字符間距）。
例如： letter-spacing: 2px;

textarea去掉右側滾動條，去掉右下角拖拽

<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>

css中透明度兼容代碼

div{filter: alpha(opacity=80);opacity:0.8;}

根據input的type來控制css樣式

1.用css中的type選擇器

input[type="text"]{ background-color:#FFC;}

2.用css的expression判斷表達式

input{ background-color:expression(this.type=="text"?'#FFC':'');}

3.用javascript腳本實現(以爲不必，省略...)

css3設置字體

@font-face{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

網頁字體設置

font-family:'YourWebFontName';
src:url('YourWebFontName.eot'); /* IE9 Compat Modes */
src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
    url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */}

參考地址：《css學習筆記 - 網頁中導入特殊字體@font-face屬性詳解》

css強制性換行

div{
  word-break:break-all; /*支持IE，chrome，FF不支持*/
  word-wrap:break-word;/*支持IE，chrome，FF*/
}

CSS :first-child 選擇器,:last-child選擇器,nth-child(IE7,8無效，不識別)

:nth-child(2)選取第幾個標籤，「2能夠是你想要的數字」
:nth-child(2n)選取偶數標籤，2n也能夠是even
:nth-child(2n-1)選取奇數標籤，2n-1能夠是odd
:nth-child(3n+1)自定義選取標籤，3n+1表示「隔二取一」

css3實現背景顏色漸變

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

第一個參數：設置漸變的起始位置
第二個參數：設置起始位置的顏色
第三個參數：設置終止位置的顏色

IE 瀏覽器
IE瀏覽器實現漸變只能使用IE本身的濾鏡去實現

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一個參數：漸變起始位置的顏色
第二個參數：漸變終止位置的顏色
第三個參數：漸變的類型
0 表明豎向漸變 1 表明橫向漸變

css3的RGB顏色和HSL顏色， IE8不識別rgba寫法

其中RGB顏色的原理是經過定義不一樣的紅綠藍色值來組成一個顏色。color:rgb(254,2,8);
其中HSL是經過色相、飽和度、亮度模式來申明顏色的。color:hsl(359,99%,40%);

若是須要設置透明背景則能夠用到他們：

background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);

不使用opacity的緣由是：opacity使裏面的元素也透明瞭，而上面的不會。
background-color:rgba(0,0,0,0.5)，此寫法解決opacity帶來的元素也透明問題，但IE8低版本瀏覽器不支持。

初始化em，u的斜體

em,u{font-style: normal;}

媒體查詢功能

通常寫法：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

應該有人會發現上面這段代碼裏面有個screen，他的意思是在告知設備在打印頁面時使用襯線字體，在屏幕上顯示時用無襯線字體。可是目前我發現不少網站都會直接省略screen,由於你的網站可能不須要考慮用戶去打印時，你能夠直接這樣寫：

@media (max-width: 960px){
    body{
        background: #000;
    }
}

其中css2的媒體查詢：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

咱們想知道移動設備是否是縱向放置的顯示屏，能夠這樣寫：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

咱們把第一段的代碼也用CSS2來實現，讓它同樣可讓頁面寬度小於960的執行指定的樣式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

可是上面這個方法，最大的弊端是他會增長頁面http的請求次數，增長了頁面負擔，咱們用CSS3把樣式都寫在一個文件裏面纔是最佳的方法。

下面的寫法是實現尺寸等於480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
  /*本身添加的樣式*/
}

其中對於-webkit-min-device-pixel-ratio做以下解釋：

-webkit-min-device-pixel-ratio爲1.0

全部非Retina的Mac
全部非Retina的iOS設備
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

-webkit-min-device-pixel-ratio爲1.3

Google Nexus 7

-webkit-min-device-pixel-ratio爲1.5

Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

-webkit-min-device-pixel-ratio爲2.0

iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
全部Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X

樣式實現三角形

div{
  position:absolute;
  left:50%;
  bottom:0;
  margin-left:-10px;
  width:0;
  height:0; 
  border-width:10px;
  border-style:solid dashed dashed dashed;
  border-color:transparent transparent #71151c transparent;
}

css3水平垂直居中

div{
  display: box; 
  display: -webkit-box; 
  display: -moz-box; 
  -webkit-box-pack:center; 
  -moz-box-pack:center; 
  -webkit-box-align:center; 
  -moz-box-align:center; 
}

css3屬性 -webkit-filter(改變模糊度亮度透明度等方法)

-webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感受效果很不錯。下面我們就學習一下filter這個屬性吧。

如今規範中支持的效果有：

grayscale 灰度值爲0-1之間的小數
sepia 褐色　　　　　　值爲0-1之間的小數
saturate 飽和度　　　　值爲num
hue-rotate 色相旋轉　　值爲angle
invert 反色　　　　　　值爲0-1之間的小數
opacity 透明度　　　　　值爲0-1之間的小數
brightness 亮度　　　　值爲0-1之間的小數
contrast 對比度　　　　值爲num
blur 模糊　　　　　　值爲length
drop-shadow 陰影

用法是標準的CSS寫法，如：

-webkit-filter: blur(2px);

使用方法：（配合動畫使用）

.jaguar-con-show img.jaguar-con-imglast{               
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}
.jaguar-con-show img.jaguar-con-imglast{   
    -webkit-filter: blur(3px) brightness(.6);
    -moz-filter: blur(3px) brightness(.6);
    -o-filter: blur(3px) brightness(.6);
    -ms-filter: blur(3px) brightness(.6);    
    filter: blur(3px) brightness(.5); 
    -webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    /*border: 3px solid #000;*/
}

CSS pointer-events

pointer-events本來來源於SVG，目前在不少瀏覽器中已經獲得體現。不過，要讓任何HTML元素生效還得藉助於一點點css。該屬性稱之爲pointer-events，基本上能夠將它設置爲auto，這是正常的行爲，而「none」是一個有趣的屬性。
若是你已經設置一個元素的css屬性爲pointer-events: none。它將不會捕獲任何click事件，而是讓事件穿過該元素到達下面的元素.

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個CSS3屬性，IE6/7/8/9都不支持，Opera在SVG中支持該屬性可是HTML中不支持。

禁止button按鈕的點擊與禁止a標籤的跳轉

pointer-events:none禁止掉鼠標事件（css3屬性）
禁止button按鈕的點擊：

<button type="button" class="btn btn-default btn-lg">默認按鈕</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕</button>

button禁止點擊的樣式：

button{cursor: not-allowed;}

因此button用到了disabled="disabled"與樣式cursor: not-allowed

禁止a標籤的跳轉行爲：

<a href="#" class="btn btn-default btn-lg" role="button">連接</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">禁用連接</a>

樣式：

a{pointer-events: none;cursor:not-allowed}

參考地址：http://www.runoob.com/try/try.php?filename=bootstrap3-button-disabledstate
可是用到鍵盤tab鍵的時候出現a標籤能夠跳轉，實現鍵盤tab也禁止a標籤跳轉參考地：
http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

樣式改變單詞的大小寫

首字母大寫：text-transform:capitalize
所有大寫：text-transform:uppercase
所有小寫：text-transform:lowercasecase

<span style="text-transform:capitalize;" >this is a test!!!</span>
首字母大寫<inputtype="text"style="text-transform:capitalize;">
所有大寫<inputtype="text"style="text-transform:uppercase;">
所有小寫<inputtype="text"style="text-transform:lowercasecase;">

html title屬性內容換行方法

a.直接填寫title內容時候「回車鍵」換行
b.使用html title換行代碼
使用代碼換行共兩種代碼，都可實現html標籤內title內容顯示時換行。
換行代碼符合分別爲：
「
」和「」
「
」拼寫：&（and符號，鍵盤數字鍵7一塊兒&）+ #（井號）+ 10（阿拉伯數字十）+ ;（小寫分號）
「」拼寫：&（and符號，鍵盤數字鍵7一塊兒&）+ #（井號）+ 13（阿拉伯數字十三）+ ;（小寫分號）
以上符合數字輸入均必須英文半角模式輸入。使用時候，在須要換行地方任選一種（組）換行符號代碼便可。

移動端定寬佈局，安卓上文字變大瞭解決辦法

例如：

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi" />

那麼解決辦法：給文字區外面的div設最大高度100%。

HTML5:input file控件限制上傳文件類型

input file控件限制上傳文件類型
文件類型中間用，分開
html和htm這樣的要寫成兩個

<input type="file"  name="filePath" accept=".jpg,.jpeg,.doc,.docx,.xls,.xlsx,.pdf">

若是限制上傳文件爲圖片類型，以下：

<input type="file" class="file" value="上傳" accept="image/*"/>

去掉input聚焦,點擊a標籤，出現的外虛線框

input:focus{outline: none;}

CSS3 vw讓overflow:auto頁面滾動條出現時不跳動

傳統的實現方式：

body { overflow-y: scroll; }

css3實現方式：

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者：

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

首先，.wrap-outer指的是居中定寬主體的父級，若是沒有，建立一個（使用主體也是能夠實現相似效果，不過本着寬度分離原則，不推薦）；
而後，calc是CSS3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
最後，100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。
因而，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（若是有，若是沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被佔用，主體內容就能夠永遠居中瀏覽器啦，從而沒有任何跳動！

參考地址：http://www.zhangxinxu.com/wor...

***如下內容將主要是在移動端使用的多***

`meta相關知識`

H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略將頁面中的數字識別爲電話號碼

<meta name="format-detection" content="telephone=no" />

忽略Android平臺中對郵箱地址的識別

<meta name="format-detection" content="email=no" />

當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本之後，safari上已看不到效果 -->

將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可選default、black、black-translucent -->

移動端viewport模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本之後，safari上已看不到效果,能夠刪除-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>viewport通用</title>
  <link style="text/css" rel="stylesheet" href="home.css">
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <!--頁面內容-->
</body>
</html>

viewport模板 - target-densitydpi=device-dpi，android 2.3.5如下版本不支持

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值與頁面定義的寬度一致 -->

本身作移動端活動的時候常以下方式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本之後，safari上已看不到效果,能夠刪除-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>viewport通用</title>
  <script type="text/javascript">
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth / 750;
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">');
    }
  </script>
  <link style="text/css" rel="stylesheet" href="home.css">
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <!--頁面內容-->
</body>
</html>

`移動端問題總結`

移動端如何定義字體font-family

中文字體使用系統默認便可，英文用Helvetica，爲何呢，首先先看一下各平臺的主流字體支持狀況（來源網絡，沒有驗證）！！！

各系統的默認字體和經常使用字體：
（表格稍後補上）
須要詳細相關信息，可查看《兼容PC手機端字體》文章

結論

各個手機系統有本身的默認字體，且都不支持微軟雅黑
如無特殊需求，手機端無需定義中文字體，使用系統默認
英文字體和數字字體可以使用 Helvetica ，三種系統都支持

代碼：

/* 移動端定義字體的代碼 */
body{font-family:Helvetica;}

移動端touch事件(區分webkit 和 winphone)

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件

如下支持webkit

touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

TouchEvent

touches：屏幕上全部手指的信息
targetTouches：手指在目標區域的手指信息
changedTouches：最近一次觸發該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息

參數信息(changedTouches[0])

clientX、clientY在顯示區的座標
target：當前元素

如下支持winphone 8

MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指
MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action:
none;}能夠阻止默認狀況的發生：阻止頁面滾動
MSPointerUp——當手指離開屏幕時觸發

移動端click事件有300 ms的延遲響應問題

歷史緣由：

2007年蘋果發佈首款iphone上IOS系統搭載的safari爲了將適用於PC端上大屏幕的網頁能比較好的展現在手機端上，使用了雙擊縮放(double tap to zoom)的方案，好比你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然能夠撐滿整個屏幕，可是字體、圖片都很小看不清，此時能夠快速雙擊屏幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。

緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。

解決方案：

fastclick能夠解決在手機上點擊事件的300ms延遲，地址：https://github.com/ftlabs/fas...
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題

觸摸事件的響應順序

一、ontouchstart 
二、ontouchmove 
三、ontouchend 
四、onclick

解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應

清除IOS系統手機對input等表單元素的默認樣式

.css{-webkit-appearance:none;}

僞元素改變number類型input框的默認樣式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

CSS美化Placeholder提示信息的樣式兼容

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

手機對Placeholder提示信息都基本帶有默認的樣式，兼容各類瀏覽器的使用方式：

.css::-webkit-input-placeholder {color: #777;}    /* WebKit browsers */
.css:-moz-placeholder {color: #777;opacity: 1;}   /* Mozilla Firefox 4 to 18 */
.css::-moz-placeholder {color: #777;opacity: 1;}  /* Mozilla Firefox 19+ */
.css:-ms-input-placeholder {color: #777;}         /* Internet Explorer 10+ */

webkit表單輸入框placeholder的文字能換行麼

ios能夠，android不行~

在textarea標籤下均可以換行~

取消a,button等元素被觸摸時產生的半透明灰色遮罩或者虛線框問題

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

-webkit-tap-highlight-color :當用戶點擊iOS的Safari瀏覽器中的連接或JavaScript的可點擊的元素時，覆蓋顯示的高亮顏色。

該屬性能夠只設置透明度。若是未設置透明度，iOS Safari使用默認的透明度。當透明度設爲0，則會禁用此屬性；當透明度設爲1，元素在點擊時不可見。

詳細參考：《-webkit-tap-highlight-color》

關閉手機端橫屏或者豎屏自動調整字體大小功能

ios使用-webkit-text-size-adjust禁止調整字體大小:

body{-webkit-text-size-adjust: 100%!important;}

text-size-adjust 設爲 none 或者 100% 關閉字體大小自動調整功能。

android使用如下代碼，該接口只在微信瀏覽器下有效:

/**
 * 頁面加入這段代碼可以使Android機器頁面再也不受到用戶字體縮放強制改變大小
 * 可是會有一個1秒左右的延遲，期間能夠考慮經過loading展現
 * 僅供參考
 */
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                    alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                alert(JSON.stringify(res));
            });
        },0);
    }
})();

禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none}

-webkit-touch-callout 是一個不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。

當你觸摸並按住觸摸目標時候，禁止或顯示系統默認菜單。在iOS上，當你觸摸並按住觸摸的目標，好比一個連接，Safari瀏覽器將顯示連接有關的系統默認菜單。這個屬性可讓你禁用系統默認菜單。

適用於：連接元素好比新窗口打開，img元素好比保存圖像等等
取值：

none：系統默認菜單被禁用
inherit：系統默認菜單不被禁用

詳細參考：《-webkit-touch-callout》

禁止ios和android用戶選中文字

.css{-webkit-user-select:none}

固然pc端如今也在用禁止用戶選中文字，兼容寫法：

.test{
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
}

固然有時候pc上也直接寫到html代碼中，如：

<div class="test" onselectstart="return false;" unselectable="on">選擇我試試，你會發現怎麼也選擇不到我，哈哈哈哈</div>

代碼解釋：

IE6-9不支持該屬性，但支持使用標籤屬性 onselectstart="return false;" 來達到
user-select:none 的效果；Safari和Chrome也支持該標籤屬性；
直到Opera12.5仍然不支持該屬性，但和IE6-9同樣，也支持使用私有的標籤屬性 unselectable="on" 來達到user-select:none 的效果；unselectable 的另外一個值是 off；
除Chrome和Safari外，在其它瀏覽器中，若是將文本設置爲
-ms-user-select:none;，則用戶將沒法在該文本塊中開始選擇文本。不過，若是用戶在頁面的其餘區域開始選擇文本，則用戶仍然能夠繼續選擇將文本設置爲
-ms-user-select:none; 的區域文本；
對應的腳本特性爲userSelect。

打電話發短信，發郵件的怎麼實現

打電話：<a href="tel:0755-10086">打電話給:0755-10086</a>
發短信：winphone系統無效，<a href="sms:10086">發短信給: 10086</a>
發郵件：<a href="mailTo:10086@qq.com">10086@qq.com</a>

詳細瞭解mailTo：移動web頁面給用戶發送郵件的方法 (郵件含文本、圖片、連接)

移動端實現相似hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活移動端css的active效果。

直接在body上添加ontouchstart，一樣可激活移動端css的active效果，比較推薦這種方式，代碼以下：

html代碼：

<body ontouchstart>
</body>

css代碼：

.btn:active{background-color: red;}

開啓硬件加速

解決頁面閃白，保證動畫流暢

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

如何阻止windows Phone的默認觸摸事件

winphone下默認觸摸事件事件使用e.preventDefault是無效的

目前解決方法是使用樣式來禁用

html{-ms-touch-action: none;}/* 禁止winphone默認觸摸事件 */

屏幕旋轉的事件和樣式

window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("橫屏:" + window.orientation);
        case 0:
        case 180:
        alert("豎屏:" + window.orientation);
        break;
    }
}

樣式：

//豎屏時使用的樣式
@media all and (orientation:portrait) {
.css{}
}

//橫屏時使用的樣式
@media all and (orientation:landscape) {
.css{}
}

IE10（winphone8）表單元素默認外觀如何重置

禁用 select 默認下拉箭頭

::-ms-expand 適用於表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

select::-ms-expand {
    display: none;
}

禁用 radio 和 checkbox 默認樣式

::-ms-check 適用於表單複選框或單選按鈕默認圖標的修改，一樣有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
    display: none;
}

禁用PC端表單輸入框默認清除按鈕

當表單文本輸入框輸入內容後會顯示文本清除按鈕，::-ms-clear 適用於該清除按鈕的修改，一樣設置使它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
    display: none;
}

Retina 顯示屏的問題

retina：一種具有超高像素密度的液晶屏，一樣大小的屏幕上顯示的像素點由1個變爲多個，如在一樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個

在高清顯示屏中的位圖被放大，圖片會變得模糊，所以移動端的視覺稿一般會設計爲傳統PC的2倍

那麼，前端的應對方案是：

設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2

//例如圖片寬高爲：200px*200px，那麼寫法以下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px

.css{font-size:20px}

移動端設置滾動條的默認樣式

/* 設置滾動條的樣式 */
::-webkit-scrollbar {
  width:12px;
}
/* 滾動槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  border-radius:10px;
}
/* 滾動條滑塊 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(255,0,0,0.4);
}

爲移動端頁面中滑動滾動條的時候，添加慣性效果的方法

首先設置：

div{height:100%;overflow-y:auto;}

可是實際在 iPhone 上測試時，發現 Safari（也包括不少 iOS App 內置瀏覽器使用的 UIWebView）居然徹底禁用掉了著名的「慣性滾動」效果。

但解決方法是有的，使人吃驚的是還很是簡單：只有一條 CSS 屬性便可解決問題：

body{-webkit-overflow-scrolling:touch;}

有的同窗添加了這一條屬性後遇到了向下滑動後頁面變成空白的問題，實際上能夠經過一條 CSS 屬性把頁面加載到內存來解決：

body{-webkit-transform:translate3d(0,0,0);}

注：若是設置了-webkit-overflow-scrolling: touch;那麼在IOS系統下對於改變滾動條的默認樣式將失效，即上面一條所述。

移動端實現控制文本行數

div{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

移動端使用flex讓內容平均分配

htm代碼：

<nav>
  <a href="#">a</a>
  <a href="#">b</a>
  <a href="#">c</a>
</nav>