行動端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 属性。如下：

 

 

   

 

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

 

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

 

 a{display:block;}

 span{dispaly:block;}

 

   

   

   

 

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 代码如下：

 

       

 

 

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 ：

 

       

       

        我就是标题

 

最初的結果是這樣子的

 

 

 

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

 

 

 

這個時候我們就要使用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"

 

我截取動態圖片軟體的問題，我的這個gif 截圖動畫有些卡頓，不流暢。在正常機器上是沒有問題的（如果大家有mac下好用的 gif截圖軟體可以推薦給我，謝謝！）。