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

emir_feng 8年前發布 | 52K 次閱讀 CSS WebKit HTML5 前端技術 Adobe Flex

1.移動端開發視窗口的添加

h5端開發下面這段話是必須配置的

XHTML

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

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

</div>

其它相關配置內容如下：

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 值。這樣可以解決多屏幕適配的問題。

比如下面的 媒體查詢代碼

XHTML

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

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

</div>

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

適配屏幕的尺寸不是連續的。
在自己的 css 文件中添加大段的這樣查詢代碼。增加了 css 文件的體積。

后來參考淘寶移動端頁面適配規則，使用 js 獲取客戶端的寬度，根據設計稿的原型動態的計算 font-size 的值。

詳細的內容請看這里根據iPhone6設計稿動態計算rem值

3.a標簽內容語義化

大多數時候我們都會給一片區域加上點擊跳轉的功能。如下圖：

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

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

XHTML

<style>
    a{display:block;}
</style>
 
<a>
    <div></div>
</a>

</div>

功能上已經沒有問題。但是在語義化的層面上，上面的代碼是不標準的。

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

XHTML

<style>
 a{display:block;}
 span{dispaly:block;}
</style>
 
<a>
    <span></span>
    <span></span>
    <span></span>
</a>

</div>

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

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

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

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

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

CSS

{
    max-width:640px;
    min-width:320px;
}

{
    max-width:640px;
    min-width:320px;
}

</div>

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

1.禁止 a 標簽背景

在移動端使用 a 標簽做按鈕的時候，點按會出現一個“暗色”的背景，去掉該背景的方法如下

CSS

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

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

</div>

2.禁止長按 a，img 標簽長按出現菜單欄

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

CSS

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

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

</div>

3.流暢滾動

CSS

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

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

</div>

6.CSS 截斷字符串

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

CSS

{
    /*指定字符串的寬度*/
    width:300px;   
    overflow: hidden;  
    /* 當字符串超過規定長度，顯示省略符*/ 
    text-overflow:ellipsis;  
    white-space: nowrap;   
}

{
    /*指定字符串的寬度*/
    width:300px;  
    overflow: hidden;  
    /* 當字符串超過規定長度，顯示省略符*/ 
    text-overflow:ellipsis;  
    white-space: nowrap;  
}

</div>

7.calc 相關問題

之前在做布局的時候使用 calc 出現了很嚴重的線上 BUG。后來就深究了下這個屬性的使用。

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

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

CSS

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

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

</div>

研究過淘寶，天貓，京東的 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.

</div>

瀏覽器支持：

9.水平垂直居中的問題

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

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

html 代碼如下：

XHTML

<div class="parent-div">
        <div class="child-div"></div>
 </div>

 <divclass="parent-div">
        <divclass="child-div"></div>
 </div>

</div>

css代碼如下：

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

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

</div>

絕對定位在布局中可以很方邊的解決很多問題，但是大多數時候都不去使用絕對定位，而是使用浮動等方法。而當需要 DOM 元素脫離當前文檔流的時候才使用絕對定位。如：彈層，懸浮層等。

10. css 中 line-height 的問題

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

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

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

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

normal 默認。設置合理的行間距。

number 設置數字，此數字會與當前的字體尺寸相乘來設置行間距。

length 設置固定的行間距。

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

inherit 規定應該從父元素繼承 line-height 屬性的值。

</div>

所以在以上的情況我們要想使，我們的字體能夠撐滿我們的容器，就需要給父級容器添加 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）

</div>

看下邊的一段 html ：

XHTML

<div class="title-div">
        <img src="1_icon.png" alt="返回圖標">
        <!-- <span >圖標位置</span> -->
        <span>我就是標題</span>
</div>

<divclass="title-div">
        <imgsrc="1_icon.png" alt="返回圖標">
        <!-- <span >圖標位置</span> -->
        <span>我就是標題</span>
</div>

</div>

最初的結果是這樣子的

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

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

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

CSS

{
    vertical-align:15px;
}

{
    vertical-align:15px;
}

</div>

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

12.flex 彈性盒模型的使用

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

談談一些基本的使用經驗吧，什么時候使用 flex 。

1.什么時候使用 flex 屬性

先來看一個產品模型如下圖

我的左邊商品和右邊商品的寬度是一樣的。當我看到這個模型的時候，第一件就是想就是使用 flex 讓我們兩列商品列表平分屏幕區域。這個時候就是用 flex 來做。

父級元素如下定義

CSS

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

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

</div>

2.添加廠商前綴

使用 flex 的時候一定要記得加廠商前綴（目前使用方式都有三種寫法：1，舊的2，過度的3，新的)。不然肯定會有兼容性問題。

CSS

{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
 }

{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
 }

</div>

3.flex低版本瀏覽器的兼容

先看我的代碼：

CSS

{
    box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 18.5rem;
}

{
    box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 18.5rem;
}

</div>

這里只是讓左右兩邊平分屏幕的寬度。之前使用 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代碼如下：

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);
    }
}</pre> 
  
.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);
    }
} 
 </div>
效果如下圖：
  
 這里我只是對圖像標簽添加了一個 class="lottery-animation" 
 我截取動態圖片軟件的問題，我的這個gif 截圖動畫有些卡頓，不流暢。在正常機器上是沒有問題的（如果大家有mac下好用的 gif截圖軟件可以推薦給我，謝謝！）。 
 
  關于 css3 動畫性能優化推薦閱讀文章：

   1. 前端性能優化之更平滑的動畫(更新) 

   2. CSS3硬件加速也有坑！！！ 

 
 如果您覺得不錯，請訪問 github（ 點我 ） 地址給我一顆星。謝謝啦！ 
 </div>

本文由用戶 emir_feng 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1453646179417.html

CSS WebKit HTML5 前端技術 Adobe Flex

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

1.移動端開發視窗口的添加

其它相關配置內容如下：

2.媒體查詢的改進

3.a標簽內容語義化

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

8.box-sizing 的使用

9.水平垂直居中的問題

10. css 中 line-height 的問題

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

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

12.flex 彈性盒模型的使用

1.什么時候使用 flex 屬性

2.添加廠商前綴

3.flex低版本瀏覽器的兼容

13.CSS3動畫性能的問題

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

相關經驗

相關資訊

相關文檔

目錄