移動端 h5開發相關內容總結——CSS篇

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%; } }

 

這樣作的結果，有兩個很明顯的缺點。

• 適配屏幕的尺寸不是連續的。
• 在本身的 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頁面的話對用戶會很不友好。 
咱們參看下京東和淘寶的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 出現了很嚴重的線上 BUG。後來就深究了下這個屬性的使用。 
calc好用的地方就是，能夠在任何單位之間進行換算。可是瀏覽器支持的不是很好。看一下 can i use 截圖：

並且在使用的時候要加上廠商前綴，達到兼容性。不過如今不推薦使用，畢竟，瀏覽器支持有限。 
示例代碼：

#formbox { width: 130px; /*加廠商前綴，操做符（+，-，*，/）兩邊要有空格）*/ width: -moz-calc(100% / 6); width: -webkit-calc(100% / 6); width: calc(100% / 6); border: 1px solid black; padding: 4px; }

研究過淘寶，天貓，京東的 h5端頁面看到這個單位用的很少，主要仍是兼容性的問題吧。

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.水平垂直居中的問題

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

這裏實現一個相對定位和絕對定位配合實現水平垂直居中的樣式。看效果：

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 一個很重要的用途就是讓咱們的文本能夠在父級元素中垂直居中，可是在使用它的過程當中也會遇到一些問題。

先來看一個實例，以下圖： 

代碼也很簡單，就是當咱們在div 中定義的字體很大的狀況下，咱們看到字體和父級元素之間有一些空隙。那麼這是爲何？ 
咱們查一下 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; }

這裏只是讓左右兩邊平分屏幕的寬度。 
以前使用 flex在安卓4.3的手機上遇到一個問題。正常的頁面應該以下圖所示，

可是在 安卓4.3的手機上倒是以下的結果

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

並且當我給個人頁面也加上這個屬性的時候，頁面的佈局也變得正常了。我如今想不明白願意是什麼，只能當一個 hack 來使用。若是你們也遇到這個問題，請試一下添加這個屬性。若是你們知道爲何這麼用，請指教一下。

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"