1.移動端開發(fā)視窗口的添加

h5端開發(fā)下面這段話是必須配置的

meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

其它相關配置內(nèi)容如下：

width viewport 寬度(數(shù)值/device-width)

height viewport 高度(數(shù)值/device-height)

initial-scale 初始縮放比例

maximum-scale 最大縮放比例

minimum-scale 最小縮放比例

user-scalable 是否允許用戶縮放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除），可以在頁面加載時最小化上下狀態(tài)欄。

2.媒體查詢的改進

之前在做移動端開發(fā)的時候碧囊，為了適配多屏幕呕臂。使用的是rem 單位。這個時候就需要根據(jù)屏幕的尺寸來來動態(tài)的設置根節(jié)點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%;

}

}

這樣做的結果蚌卤，有兩個很明顯的缺點逊彭。

適配屏幕的尺寸不是連續(xù)的侮叮。

在自己的 css 文件中添加大段的這樣查詢代碼囊榜。增加了 css 文件的體積砂沛。

后來參考淘寶移動端頁面適配規(guī)則碍庵，使用 js 獲取客戶端的寬度怎抛，根據(jù)設計稿的原型動態(tài)的計算font-size 的值马绝。

詳細的內(nèi)容請看這里 根據(jù)iPhone6設計稿動態(tài)計算rem值

3.a標簽內(nèi)容語義化

大多數(shù)時候我們都會給一片區(qū)域加上點擊跳轉的功能挣菲。如下圖：

很可能我們商品區(qū)域都是使用的div 標簽。很容易我們會給最外層加上一個 a 標簽椭赋。因為a 是行內(nèi)元素，是沒有寬和高的或杠。不能夠把容器撐開。

一種解決辦法就是給a 標簽設置block 屬性认境。如下：

a{display:block;}

功能上已經(jīng)沒有問題。但是在語義化的層面上叉信，上面的代碼是不標準的。

最好的做法就是做如下的修改,這樣不會使自己的 html 代碼顯的太突兀：

a{display:block;}

span{dispaly:block;}

4.為自己的頁面設置最大寬度和最小寬度

如果我們使用的是rem 單位艘希，使用 js 動態(tài)計算font-size 值的話，我們可以無限適配最大和最小的終端屏幕营袜。但是當用戶的屏幕超過一定的尺寸以后還繼續(xù)顯示h5頁面的話對用戶會很不友好讶迁。

我們參看下京東和淘寶的h5 頁面

我們看到了都是定義了頁面的最大和最小寬度巍糯。這樣在屏幕超過一定的尺寸以后可以更友好的展示（當然這不是必須的）。

我給自己的產(chǎn)品頁面定義的最大的寬度和最小寬度分別是：

{

max-width:640px;

min-width:320px;

}

5.去掉 a罚斗，input 在移動端瀏覽器中的默認樣式

1.禁止 a 標簽背景

在移動端使用 a標簽做按鈕的時候宅楞，點按會出現(xiàn)一個“暗色”的背景厌衙，去掉該背景的方法如下

a,button,input,optgroup,select,textarea{

-webkit-tap-highlight-color:rgba(0,0,0,0);/*去掉a、input和button點擊時的藍色外邊框和灰色半透明背景*/

}

2.禁止長按 a榕暇，img 標簽長按出現(xiàn)菜單欄

使用 a標簽的時候彤枢，移動端長按會出現(xiàn)一個 菜單欄，這個時候禁止呼出菜單欄的方法如下：

a, img{

-webkit-touch-callout:none;/*禁止長按鏈接與圖片彈出菜單*/

}

3.流暢滾動

body{

-webkit-overflow-scrolling:touch;

}

6.CSS 截斷字符串

單行截斷字符串,這里必須指定字符串的寬度

{

/*指定字符串的寬度*/

width:300px;

overflow:hidden;

/* 當字符串超過規(guī)定長度缴啡，顯示省略符*/

text-overflow:ellipsis;

white-space:nowrap;

}

7.calc 相關問題

之前在做布局的時候使用calc 出現(xiàn)了很嚴重的線上 BUG业栅。后來就深究了下這個屬性的使用谬晕。

calc好用的地方就是固蚤，可以在任何單位之間進行換算歹茶。但是瀏覽器支持的不是很好×敲希看一下 can i use 截圖：

而且在使用的時候要加上廠商前綴揩页，達到兼容性爆侣。不過現(xiàn)在不推薦使用，畢竟茫负，瀏覽器支持有限忍法。

示例代碼：

#formbox{

width:130px;

/*加廠商前綴榕吼，操作符（+羹蚣，-，*踢匣，/）兩邊要有空格）*/

width:-moz-calc(100%/6);

width:-webkit-calc(100%/6);

width:calc(100%/6);

border:1pxsolidblack;

padding:4px;

}

研究過淘寶戈抄，天貓划鸽，京東的 h5端頁面看到這個單位用的不多，主要還是兼容性的問題吧嫂用。

8.box-sizing 的使用

解決盒模型在不同瀏覽器中表現(xiàn)不一致的問題嘱函。但是仍然會有兼容性問題埂蕊。看最下面的瀏覽器支持列表函似。

box-sizing 屬性用來改變默認的 CSS 盒模型 對元素高寬的計算方式撇寞。這個屬性用于模擬那些非正確支持標準盒模型的瀏覽器的表現(xiàn)。

它有三個屬性值分別是：

content-box 默認值牌废，標準盒模型畔规。 width 與 height 只包括內(nèi)容的寬和高恨统， 不包括邊框畜埋，內(nèi)邊距，外邊距对室。注意: 內(nèi)邊距, 邊框 & 外邊距 都在這個盒子的外部掩宜。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在瀏覽器中的渲染的實際寬度將是370px;

padding-box width 與 height 包括內(nèi)邊距么翰，不包括邊框與外邊距浩嫌。

border-box width 與 height 包括內(nèi)邊距與邊框，不包括外邊距追迟。這是IE 怪異模式（Quirks mode）使用的 盒模型 敦间。注意：這個時候外邊距和邊框將會包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 瀏覽器渲染出的寬度將是350px.

瀏覽器支持：

9.水平垂直居中的問題

可以看之前寫定位的一篇文章金闽，末尾有講到各種定位：【從0到1學Web前端】CSS定位問題三(相對定位,絕對定位)

這里實現(xiàn)一個相對定位和絕對定位配合實現(xiàn)水平垂直居中的樣式∨ɡ看效果：

html 代碼如下：

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;

}

絕對定位在布局中可以很方邊的解決很多問題贷掖，但是大多數(shù)時候都不去使用絕對定位苹威，而是使用浮動等方法驾凶。而當需要 DOM 元素脫離當前文檔流的時候才使用絕對定位调违。如： 彈層，懸浮層等且轨。

10. css 中 line-height 的問題

line-height 一個很重要的用途就是讓我們的文本可以在父級元素中垂直居中旋奢，但是在使用它的過程中也會遇到一些問題然痊。

先來看一個實例玷过，如下圖：

代碼也很簡單辛蚊，就是當我們在div 中定義的字體很大的情況下，我們看到字體和父級元素之間有一些空隙初澎。那么這是為什么碑宴？

我們查一下 line-height 的定義，如下：

normal 默認祸挪。設置合理的行間距贞间。

number 設置數(shù)字增热，此數(shù)字會與當前的字體尺寸相乘來設置行間距峻仇。

length 設置固定的行間距。

% 基于當前字體尺寸的百分比行間距凡蚜。

inherit 規(guī)定應該從父元素繼承 line-height 屬性的值番刊。

所以在以上的情況我們要想使影锈，我們的字體能夠撐滿我們的容器鸭廷，就需要給父級容器添加 line-height屬性且值為 100%

代碼和效果如下：

那么為什么會出現(xiàn)上面的問題呢辆床？

line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到一個文本行內(nèi)容的頂部和底部轿秧。

所以菇篡，可以得出下面的一個公式：

空白間距 = line-height – font-size

所以一喘，當設置為line-height 的值為100%的時候，line-height的值就等于 font-size的尺寸闷沥，此時的空白間距為0咐容。

11.使用 vertical-align 調整圖標垂直居中

很多時候我們要把圖標和文字配合使用疟丙，而且需要圖標和文字都能夠垂直居中享郊。如下圖所示：

如果要實現(xiàn)文字的垂直居中很容易炊琉，只需要使用line-height=父容器高度 又活。但是要想使圖標能夠垂直居中就比較麻煩柳骄。

正常情況下我們的文字或者說相鄰的容器，都應該和文字保持在相同的底線上舔清，如下圖：

明顯的可以看到我們的返回圖標不是垂直居中的体谒。那么應該怎么樣使圖標垂直居中呢抒痒？

首先颁褂，我們先來搞清楚幾個線的關系（圖片來源于網(wǎng)絡颁独，侵權請告知）：

這樣我們就要用到 vertical-align 這個屬性奖唯，最重要的一點是:

指定了行內(nèi)（inline）元素或表格單元格（table-cell）元素的垂直對齊方式

baseline：將支持valign特性的對象的內(nèi)容與父級元素基線對齊

sub：元素基線與父元素的下標基線對齊。

super：元素基線與父元素的上標基線對齊坯墨。

top： 元素及其后代的頂端與整行的頂端對齊捣染。

text-top：元素頂端與父元素字體的頂端對齊耍攘。

middle：元素中線與父元素的基線對齊。

bottom：元素及其后代的底端與整行的底端對齊扒磁。

text-bottom：元素底端與父元素字體的底端對齊妨托。

percentage：用百分比指定由基線算起的偏移量吝羞【牛可以為負值》危基線對于百分數(shù)來說就是0%筒捺。

length：用長度值指定由基線算起的偏移量∠悼裕可以為負值∥衷担基線對于數(shù)值來說為0则吟。（CSS2）

看下邊的一段 html ：

我就是標題

最初的結果是這樣子的

我們想實現(xiàn)如下圖所示的結果，圖標相對于右邊的字體居中：

這個時候我們就要使用vertical-align屬性和設置他的length屬性水慨，即設置我們的圖標相對與文字基線的偏移量。

當我們加入屬性的時候很容易使圖標和文字都垂直居中晰洒。

{

vertical-align:15px;

}

這個時候就會是我們的圖標和字體相對于父級元素居中。

12.flex 彈性盒模型的使用

flex 現(xiàn)在 pc 端支持的不好（主要是因為還有很多 IE8治宣，9的用戶存在砌滞。）大多情況下我們都是在移動端使用flex布局。但是就算是這樣贝润，也會有很多坑人的 bug出現(xiàn)。

談談一些基本的使用經(jīng)驗吧按傅，什么時候使用 flex 胧卤。

1.什么時候使用 flex 屬性

先來看一個產(chǎn)品模型如下圖

我的左邊商品和右邊商品的寬度是一樣的拼岳。當我看到這個模型的時候，第一件就是想就是使用 flex 讓我們兩列商品列表平分屏幕區(qū)域惜纸。這個時候就是用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;

}

這里只是讓左右兩邊平分屏幕的寬度绎速。

之前使用 flex在安卓4.3的手機上遇到一個問題纹冤。正常的頁面應該如下圖所示，

但是在 安卓4.3的手機上卻是如下的結果

后來研究了下天貓的頁面（因為之前使用這個 flex 就是參考天貓來學習的），看到他們在定義flex值的時候 都會有這樣的一個屬性width=0;

而且當我給我的頁面也加上這個屬性的時候将宪，頁面的布局也變得正常了较坛。我現(xiàn)在想不明白愿意是什么丑勤，只能當一個 hack 來使用吧趣。如果大家也遇到這個問題强挫，請試一下添加這個屬性。如果大家知道為什么這么用呆细，請指教一下絮爷。

13.CSS3動畫性能的問題

給大家推薦一個網(wǎng)站（點擊這里）可以檢測我們平時使用的 css 屬性改變元素樣式的時候坑夯，觸發(fā)的是 cpu還是 gpu 抡四，特別是在做動畫的時候床嫌，如果使用 gpu 渲染圖形厌处，可以減少 cpu 的消耗，提高程序的性能缆娃。

比如我們做一個 slider 動畫切換圖片位置的時候贯要，會使用margin-left的屬性，通過網(wǎng)站查詢該屬性值得到如下的結果

由上可以知道使用margin-left 的時候會處罰頁面的重繪和重排。

但是當我們使用css3新屬性transform 來代替?zhèn)鹘y(tǒng)的 margin-left 來改變元素位置的時候對頁面有什么影響呢葫掉？先來看下網(wǎng)站查詢的結果：

由查詢結果可以知道俭厚，使用transform 不會觸發(fā)任何的重繪驶臊。而且會觸發(fā) gpu 來幫助頁面的排版关翎。即使用GPU操作渲染動畫纵寝，減少cpu的消耗，提高性能。

css動畫簡單實例闹啦，css代碼如下：

.lottery-animation{

-webkit-animation:lottery-red2s;

animation:lottery-red2s;

-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"

我截取動態(tài)圖片軟件的問題，我的這個gif 截圖動畫有些卡頓纺酸，不流暢餐蔬。在正常機器上是沒有問題的（如果大家有mac下好用的 gif截圖軟件可以推薦給我佑附，謝謝！）权均。

轉載至：http://mp.weixin.qq.com/s?timestamp=1488087696&src=3&ver=1&signature=BoAjs4K62hLsfVBptYt-fykhdUp5RBr8QaioArGlI4HOUfoe*7K8Wr-Me8HXaBZoZq9SY00UfR2QD-X*15EguVzclKVUdQorXGSM0VD-IUFytnS-xdQE3cNOOgTw47T4YhceyTEeTs*RPacCn9bGQByVpxbUTyeaW408foeU60k=叽赊，如有侵權請聯(lián)系我