1.移動端開發視窗口的的添加
H5開發 這段是必須配置的
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">其他相關配置內容如下：
- width viewport 寬度(數值/device-width)
- height viewport 高度(數值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否允許用戶縮放(yes/no)
- minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），可以在頁面加載時最小化上下狀態欄。
2.媒體查詢的改進
之前在做移動端開發的時候，爲了適配多屏幕。使用的是rem 單位。這個時候就需要根據屏幕的尺寸來來動態的設置根節點html 的font-size 值。這樣可以解決多屏幕適配的問題。
html {
//iphone5
font-size: 62.5%;
}
@media (max-width: 414px) {
html {
//iphone6+
font-size: 80.85%;
}
}
@media (max-width: 375px) {
html {
//iphone6
font-size: 73.24%;
}
}這樣做的結果，有兩個很明顯的缺點。
1.適配屏幕的尺寸不是連續的。
2.在自己的 css 文件中添加大段的這樣查詢代碼。增加了 css 文件的體積。
後來參考淘寶移動端頁面適配規則，使用 js 獲取客戶端的寬度，根據設計稿的原型動態的計算font-size 的值。
詳細的內容請看這裏 根據iPhone6設計稿動態計算rem值
3.a標籤內容語義化
大多數時候我們都會給一片區域加上點擊跳轉的功能
很可能我們商品區域都是使用的div 標籤。很容易我們會給最外層加上一個 a 標籤。因爲a 是行內元素，是沒有寬和高的。不能夠把容器撐開。
一種解決辦法就是給a 標籤設置block 屬性。如下：
<style>
a{display:block;}
</style>
<a>
<div></div>
</a>功能上已經沒有問題。但是在語義化的層面上，上面的代碼是不標準的。
最好的做法就是做如下的修改,這樣不會使自己的 html 代碼顯的太突兀：
<style>
a{display:block;}
span{dispaly:block;}
</style>
<a>
<span></span>
<span></span>
<span></span>
</a>4.爲自己的頁面設置最大寬度和最小寬度
如果我們使用的是rem 單位，使用 js 動態計算font-size 值的話，我們可以無限適配最大和最小的終端屏幕。但是當用戶的屏幕超過一定的尺寸以後還繼續顯示h5頁面的話對用戶會很不友好。
我們看到了都是定義了頁面的最大和最小寬度。這樣在屏幕超過一定的尺寸以後可以更友好的展示（當然這不是必須的）。
我給自己的產品頁面定義的最大的寬度和最小寬度分別是：
{
max-width:640px;
min-width:320px;
}5.去掉 a，input 在移動端瀏覽器中的默認樣式
1.禁止 a 標籤背景
在移動端使用 a標籤做按鈕的時候，點按會出現一個“暗色”的背景，去掉該背景的方法如下：
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點擊時的藍色外邊框和灰色半透明背景*/
}2.禁止長按 a，img 標籤長按出現菜單欄
使用 a標籤的時候，移動端長按會出現一個 菜單欄，這個時候禁止呼出菜單欄的方法如下：
a, img {
-webkit-touch-callout: none; /*禁止長按鏈接與圖片彈出菜單*/
}3.流暢滾動
body{
-webkit-overflow-scrolling:touch;
}6.CSS 截斷字符串
單行截斷字符串,這裏必須指定字符串的寬度
{
/*指定字符串的寬度*/
width:300px;
overflow: hidden;
/* 當字符串超過規定長度，顯示省略符*/
text-overflow:ellipsis;
white-space: nowrap;
}7.calc 相關問題
calc好用的地方就是，可以在任何單位之間進行換算。但是瀏覽器支持的不是很好。
而且在使用的時候要加上前綴，達到兼容性。不過現在不推薦使用，畢竟，瀏覽器支持有限。
示例代碼：
#formbox {
width: 130px;
/*前綴，操作符（+，-，*，/）兩邊要有空格）*/
width: -moz-calc(100% / 6);
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}用的不是很多，主要原因還是兼容性的問題吧。
8.box-sizing 的使用
解決盒模型在不同瀏覽器中表現不一致的問題。但是仍然會有兼容性問題。
box-sizing 屬性用來改變默認的 CSS 盒模型 對元素高寬的計算方式。這個屬性用於模擬那些非正確支持標準盒模型的瀏覽器的表現。
它有三個屬性值分別是：
content-box 默認值，標準盒模型。 width 與 height 只包括內容的寬和高， 不包括邊框，內邊距，外邊距。注意:
內邊距, 邊框 & 外邊距 都在這個盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那麼在瀏覽器中的渲染的實際寬度將是370px; padding-box width 與 height 包括內邊距，不包括邊框與外邊距。 border-box width 與 height 包括內邊距與邊框，不包括外邊距。這是IE 怪異模式（Quirks mode）使用的 盒模型 。注意：這個時候外邊距和邊框將會包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 瀏覽器渲染出的寬度將是350px.
9.水平垂直居中的問題
這裏實現一個相對定位和絕對定位配合實現水平垂直居中的樣式：
html代碼
<div class="parent-div">
<div class="child-div"></div>
</div>css代碼
.parent-div{
width: 100px;
height: 100px;
background-color:red;
position:relative;
}
.child-div{
width:50px;
height:50px;
background-color:#000;
position: absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}絕對定位在佈局中可以很方邊的解決很多問題，但是大多數時候都不去使用絕對定位，而是使用浮動等方法。而當需要 DOM 元素脫離當前文檔流的時候才使用絕對定位。如： 彈層，懸浮層等。
10. css 中 line-height 的問題
line-height 一個很重要的用途就是讓我們的文本可以在父級元素中垂直居中，但是在使用它的過程中也會遇到一些問題。
line-height 的定義，如下：
normal 默認。設置合理的行間距。
number 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。
length 設置固定的行間距。
% 基於當前字體尺寸的百分比行間距。
inherit 規定應該從父元素繼承 line-height 屬性的值。
以上的情況我們要想使我們的字體能夠撐滿我們的容器，就需要給父級容器添加 line-height屬性且值爲 100%
注意：
line-height 與 font-size 的計算值之差(行距)分爲兩半，分別加到一個文本行內容的頂部和底部。
所以，可以得出一個計算公式：
空白間距 = line-height – font-size
所以，當設置爲line-height 的值爲100%的時候，line-height的值就等於 font-size的尺寸，此時的空白間距爲0。
11.使用 vertical-align 調整圖標垂直居中
很多時候我們要把圖標和文字配合使用，而且需要圖標和文字都能夠垂直居中，如果要實現文字的垂直居中很容易，只需要使用line-height=父容器高度 。但是要想使圖標能夠垂直居中就比較麻煩。
正常情況下我們的文字或者說相鄰的容器，都應該和文字保持在相同的底線上。
我們就要用到 vertical-align 這個屬性，最重要的一點是:
指定了行內（inline）元素或表格單元格（table-cell）元素的垂直對齊方式
baseline：將支持valign特性的對象的內容與父級元素基線對齊
sub：元素基線與父元素的下標基線對齊。
super：元素基線與父元素的上標基線對齊。
top： 元素及其後代的頂端與整行的頂端對齊。
text-top：元素頂端與父元素字體的頂端對齊。
middle：元素中線與父元素的基線對齊。
bottom：元素及其後代的底端與整行的底端對齊。
text-bottom：元素底端與父元素字體的底端對齊。
percentage：用百分比指定由基線算起的偏移量。可以爲負值。基線對於百分數來說就是0%。
length：用長度值指定由基線算起的偏移量。可以爲負值。基線對於數值來說爲0。（CSS2）
看下邊的一段 html ：
<div class="title-div">
<img src="1_icon.png" alt="返回圖標">
<!-- <span >圖標位置</span> -->
<span>我就是標題</span>
</div>這個時候我們就要使用vertical-align屬性和設置他的length屬性，即設置我們的圖標相對與文字基線的偏移量。
當我們加入屬性的時候很容易使圖標和文字都垂直居中。
{
vertical-align:15px;
}這個時候就會是我們的圖標和字體相對於父級元素居中。
12.flex 彈性盒模型的使用
flex 現在 pc 端支持的不好（主要是因爲還有很多 IE8，9的用戶存在。）大多情況下我們都是在移動端使用flex佈局。但是就算是這樣，也會有很多坑人的 bug出現。
談談一些基本的使用經驗吧，什麼時候使用 flex 。
1.什麼時候使用 flex 屬性？
我的左邊商品和右邊商品的寬度是一樣的。當我看到這個模型的時候，第一件就是想就是使用 flex 讓我們兩列商品列表平分屏幕區域。這個時候就是用flex 來做。
父級元素如下定義
{
margin-bottom: .5rem;
display: box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
}2.添加前綴
使用 flex 的時候一定要記得加、前綴（目前使用方式都有三種寫法：1.舊的；2.過度的；3.新的)。不然肯定會有兼容性問題。
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
}3.flex低版本瀏覽器的兼容
{
box-flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 18.5rem;
}13.CSS3動畫性能的問題
給大家推薦一個網站可以檢測我們平時使用的 css 屬性改變元素樣式的時候，觸發的是 cpu還是 gpu ，特別是在做動畫的時候，如果使用 gpu 渲染圖形，可以減少 cpu 的消耗，提高程序的性能。
比如我們做一個 slider 動畫切換圖片位置的時候，會使用margin-left的屬性，通過網站查詢該屬性值得到如下的結果：
由上可以知道使用margin-left 的時候會處罰頁面的重繪和重排。
但是當我們使用css3新屬性transform 來代替傳統的 margin-left 來改變元素位置的時候對頁面有什麼影響呢？先來看下網站查詢的結果：
由查詢結果可以知道，使用transform 不會觸發任何的重繪。而且會觸發 gpu 來幫助頁面的排版。即使用GPU操作渲染動畫，減少cpu的消耗，提高性能。
css動畫簡單實例，css代碼如下：
.lottery-animation {
-webkit-animation: lottery-red 2s;
animation: lottery-red 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes lottery-red {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes lottery-red {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}這裏只需要對圖像標籤添加了一個 class=”lottery-animation”即可。