響應式開發

響應式

• 設計原則
• meta标簽
• Bootstrap
• 機型相容
• em / rem
• 點透事件
• 1px問題

設計原則

1、移動優先：設計初期考慮頁面如何在多終端展示

2、漸進式增強，平穩退化：充分發揮硬體裝置的最大功能

對于支援css3 feature的浏覽器要充分發揮硬體裝置的功能，提高體驗

對于低端浏覽器使用JS中的hack()方法

meta标簽

<meta name=“viewport” content=“width=device-width, initial-scale=1.0,

user-scalable=no, minimum-scale=1.0, maximum-scale=1.0”>

viewport： viewport 是使用者網頁的可視區域。

手機浏覽器是把頁面放在一個虛拟的"視窗"（viewport）中，通常這個虛拟的"視窗"（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機浏覽器優化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。

content屬性值 :

width:可視區域的寬度，值可為數字或關鍵詞device-width（頁面寬度等于裝置寬度）

height:同width

intial-scale:頁面首次被顯示是可視區域的縮放級别，取值1.0則頁面按實際尺寸顯示，無任何縮放

maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級别，

maximum-scale使用者可将頁面放大的程式，1.0将禁止使用者放大到實際尺寸之上。

user-scalable:是否可對頁面進行縮放，no 禁止縮放

Bootstrap

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷，目前最受歡迎的前端架構。

Bootstrap教程

機型相容

手機固有bug某些 IOS裝置 上觸發不了點選事件

解決方法：在元素上加

pointer：cursor

em / rem

1、em作為font-size的機關時，其代表父元素的字型大小，em作為其他屬性機關時，代表自身字型大小

2、rem作用于非根元素時，相對于根元素字型大小；rem作用于根元素字型大小時，相對于其出初始字型大小。rem取值的兩種情況：

html{font-size:2rem}
/* 作用于根元素，相對于原始大小（16px），是以html的font-size為32px*/
p{font-size:2rem}
/* 作用于非根元素，相對于根元素字型大小，是以為64px */
           

點透事件

原因： zepto的tap事件是通過兼聽綁定在document上的touch事件來完成tap事件的模拟的，并且tap事件是冒泡到document上觸發的!!!而在冒泡到document之前，使用者手的接觸螢幕(touchstart)和離開螢幕(touchend)是會觸發click事件,因為click事件有延遲觸發(這就是為什麼移動端不用click而用tap的原因)(click事件有300ms的延遲,為了實作safari的輕按兩下事件的設計)，是以在執行完tap事件之後，彈出來的選擇元件馬上就隐藏了，此時click事件還在延遲的300ms之中，當300ms到來的時候，click到的其實不是完成而是隐藏之後的下方的元素，如果正下方的元素綁定的有click事件此時便會觸發

解決方案：

1、touchstart->touchend->click。

即click的觸發是有延遲的，這個時間大概在300ms左右。用touchstart事件代替click事件

.on('touchstart',function(){
e.preventDefault();
}) 
           

2、引入fastclick.js，因為fastclick源碼不依賴其他庫是以你可以在原生的js前直接加上

3、用touchend代替tap事件并阻止掉touchend的預設行為

preventDefault()

4、延遲一定的時間(300ms+)來處理事件

1px問題

原因： devicePixelRatio特性導緻，iphone的

devicePixelRatio=2

，而

border-width: 1px

描述的是裝置獨立像素，是以，border被放大到實體像素2px顯示，在iPhone上就顯得較粗。

解決方法：

transform: scale(0.5)

， 把border給了元素的before或者after等僞類，然後讓僞類利用css3的transform的scaleY(0.5)縮放0.5像素，即可解決：

1.) 設定height: 1px，根據媒體查詢結合transform縮放為相應尺寸。

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}
           

2.) 用::after和::befor,設定

border-bottom：1px solid #000

,然後在縮放

-webkit-transform: scaleY(0.5);

可以實作兩根邊線的需求

div::after{
    content:'';width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}
           

3.) 用::after設定

border：1px solid #000; width:200%; height:200%

,然後再縮放

scaleY(0.5);

優點可以實作圓角，缺點是按鈕添加active比較麻煩。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}
           

媒體查詢 + transfrom：

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}