chapter 1 移動頁面開發

• 頁面佈局
• 頁面除錯
• 常用庫和框架

1.1 頁面佈局

1.1.1 Vieport（視口，檢視視窗）

• 裝置畫素
  
  • 物理畫素：螢幕解析度；
  • 裝置獨立畫素：CSS畫素（eg:IPhone5 CSS畫素是320*568px）。
• 畫素密度（PPI）
  
  • PPI = ( 螢幕解析度寬的平方+螢幕解析度高的平方 )開根號 / 4 （eg：IPhone5的PPI大於等於326）
  • 根據Apple提出的定義，電腦顯示屏PPI高於200，手持平板顯示屏PPI高於260及行動電話顯示屏高於300的螢幕都稱為Retina螢幕。（但是可以通過另一數值來判斷是否是Retina顯示屏—-裝置畫素比DPR）
• 裝置畫素比（DPR）
  
  • DPR= 物理畫素 / CSS畫素
  • 對於常規顯示屏來說，物理畫素和CSS畫素比是1：1，但是在Retina螢幕裝置中，一個CSS畫素可能等於多個物理畫素。
    
  • 可以通過window的devicePixelRatio屬性來獲取當前裝置的DPR：

<script>
    var dpr = window.devicePixelRatio;
    console.log('dpr-----' + dpr);
</script>

• • eg：IPhone6 裝置物理畫素：750px * 1334px，CSS畫素：375px * 667px，DPR=2。（IPhone從4代開始基本就是2，IPhone Plus例外（DPR：3），而安卓裝置，碎片化很嚴重，沒有一個定值。）

• 3個Viewport
  

  • 1 . Layout Viewport
    
    • 預設的viewport，通過js的document.documentElement.clientWidth(Height）獲取。
  • 2 . Visual Viewport
    
    • 在瀏覽器或者App的Webview中的可視區域，通過js的window.innerWidth(Height）獲取。
  • 3 . Ideal Viewport
    
    • IPhone4/4s/5/5s          320px（豎屏下寬度，下同）
    • IPhone6s                      375px
    • IPhone6 Plus/6s Plus   414px
    • Android（大部分）       320px
      

  visual viewport 就是當前顯示給使用者內容的視窗，你可以拖動或者放大縮小網頁，來看清楚網頁的內容。
  layout viewport 有網頁的所有內容，他可以全部或者部分展示給使用者。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• • Viewport可以用js進行動態的修改，以運用於一些特殊的專案中。
    
    • 淘寶就是通過js的document.write方式設定viewport的

    // 使用 document.write
     <script>
     document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">')
    </script>

    // 使用 setAttribute
    <meta id="viewport" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <script>
    var vp = document.getElementById('viewport');
    vp.setAttribute('content', 'width=300')
    </script>

• 圖片模糊問題
  
  • 原因：在Retina顯示屏等螢幕下，一個位影象素就對應了多個物理畫素，這就導致點陣圖畫素的色彩值不夠分，多出來的物理畫素就近取色，導致圖片模糊。（ 當1個位影象素等於1個物理畫素是，圖片就是清晰的。當在高清螢幕中會用兩個或多個物理畫素來顯示實際1px圖片的內容。相當於把1px的圖片放大顯示了。）
  • 解決（應該讓圖片大一點，然後在程式碼裡縮小圖片！）：
    
    • 將原本的尺寸放大一定的倍數，這個倍數便是參考DPR值。（大多數裝置的DPR都是2，因此，我們將視覺稿放大兩倍去設計即可。
    • 壓縮圖示尺寸
      （1）直接設定寬高壓縮。（eg：圖片實際大小是240px * 480px，那就在< img >標籤中設定 width=120px; height=240px; 這樣在移動端就清晰了。）
      （2）通過設定background-size的方式來壓縮（一般縮小一倍）。

1.1.2 佈局形式

• 傳統頁面佈局（考慮Retina螢幕的內容清晰度，頁面兩邊背景圖留白問題）
• 滑屏頁面佈局（每一頁都是全屏，百分比佈局，設定html，body{height:100%;}使div的高度100%）
  具體實現思路：
  
  • 三層div。
    
    • 第一層高度100%，設定overflow：hideen；。第二層設定高度1000%，等於10個螢幕的高度。第三層存放10個div，每一個div是一屏，高度為10%。
  • 使用 js 監聽 touchstart，touchmove，touchend事件。

1.1.3 媒體查詢

• 使用媒體查詢
  
  • 方式1：用link在 < head>外鏈樣式表。
    < link rel=”stylesheet” media=”screen and (max-width:320px)” href=”ip5.css”>
  • 方式2：直接寫入< head>的style裡面。
    @media screen and (max-width:320px) { background:#fff; }
• 媒體查詢中的斷點設定
  *根據內容寬度設定（ 根據裝置寬度設定與內容寬度設定類似，不同之處在於 max-width設定斷點為320px，360px，375px，414px，768px）

//css媒體查詢：（根字型大小100px，如果10px大小，寫成0.1rem） 

html { 
font-size : 100px; 
}

@media only screen and (min-width: 320px) and (max-width: 479px){ 
    html { 
        font-size: 42.67px !important; 
    } 
} 
@media only screen and (min-width: 480px) and (max-width: 639px){ 
    html { 
        font-size: 64px !important; 
    } 
} 
@media only screen and (min-width: 640px) and (max-width: 749px){ 
    html { 
        font-size: 85.34px !important; 
    } 
}

@media only screen and (min-width: 750px) and (max-width: 959px){ 
    html { 
        font-size: 100px !important; 
    } 
} 
@media only screen and (min-width: 960px) and (max-width: 1241px){ 
    html { 
        font-size: 128px !important; 
    } 
}

@media only screen and (min-width: 1242px){ 
    html { 
        font-size: 165.6px !important; 
    } 
}

//js控制（zepto / jQuery）（根字型大小100px，如果10px大小，寫成0.1rem） 

function setFont() { 
let window_width = window.innerWidth; 
let font_size = parseFloat(window_width / 3.75); 
$(‘html’).css(‘font-size’, font_size); 
}

$(window).on(‘resize’, function () { 
setFont(); 
});

• • 根據裝置方向設定

@media screen and (orientation:portrait){ /*設定豎屏時的樣式*/}
@media screen and (orientation:landscape){ /*設定橫屏時的樣式*/}

• • 根據裝置畫素比設定

@media screen and (device-pixel-ratio:2){ /*設定裝置畫素比為2時的樣式*/}

1.1.4 螢幕適應

• 百分比佈局

  • 百分比佈局非常適合移動端，能夠很好地解決裝置尺寸碎片化的情況，相容性也非常好，而且元素的佔比計算不會太複雜。
  • eg：設計寬度為640px，圖片寬高為191px * 67px；（bg設定，而不是img標籤）
  • 圖片在頁面的百分比寬度width：191px / 640px =` 29.84%

  • 圖片在頁面的百分比高度height：0.2914 * 67 /191 =` 10.47%

  • 計算公式： W（元素當前百分比寬度）/ padding-bottom = 圖片真實寬度 / 圖片真實高度。

  • 為什麼使用padding-bottom？因為height和width的參考物件不同（height的備份比值是以父元素的高度參考計算的，但是在實際中，只有在父元素的高度是一個指定值時，子元素設定的百分比高度才會起作用，否則高度會被充值未auto，設定height沒有太多的運用價值），height值無法實現等比例變化，而高度在完全使用padding-bottom或者padding-top撐起來。

  • CSS規範中，margin和padding的百分比值是以其自身父元素的寬度為基礎進行計算的。CSS的預設排版的橫向的，橫向寬度會是一定的，縱向高度是可以無限延展的。

  • eg：一個div元素，寬300px，高度200px，其中包含子元素p，當p的CSS樣式為margin：10%，p的margin-top/right/bottom/left分別為多少呢？按常規應該是20px,30px,20px,30px.
  • 但真實值是30px,30px,30px,30px
  • 當改變排版，給p的父盒子div設定-webkit-writing-mode-:vertical-lr; 即橫向排版變成縱向。margin參考物件發生改變，從而以父元素的高度為基礎進行計算，真實值為：20px,20px,20px,20px；
  • 示例圖

  • 

    【左圖為頁面渲染結果；中、右圖為盒子模型圖 。】

    • 左1：是橫向排版margin10%，
    • 左2：是豎向排版margin10%
    • 左3：是橫向排版margin-left：10px；
      中：橫向排版margin10%（左1）的盒子模型
      右：豎向排版margin10%（左2）的盒子模型

  • 驗證margin參考物件遇到的坑———margin塌陷問題（以下是對margin的塌陷問題和外邊距合併現象擴充套件）：

  • 場景：給div中的p設定margin：10%樣式，按常規渲染應該出現如下圖的樣子。但實際情況卻是上面的 左1圖。 【div跟著p一起向下平移了！！】
  • 大盒子包含一個小盒子，小盒子設定margin-top，大盒子會一起向下平移。這就是傳說中的margin塌陷問題！
  • 要強調的是外邊距的塌陷問題只會在垂直之間產生塌陷；水平之間不受影響的；還有就是兩個盒子的垂直外邊距完全接觸才會觸發。
  • margin塌陷問題的原因：
  • 在CSS當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。【對於有塊級子元素的元素計算高度的方式，如果元素沒有垂直邊框和填充，那其高度就是其子元素頂部和底部邊框邊緣之間的距離。一個DIV和它的子DIV特別重視垂直邊框或填充，也就好像是，一口鍋，裡面放個盆，能不能扣住裡面的盆，主要看鍋蓋了，垂直邊框或填充就是這個“鍋蓋”。】
  • margin-top是一個距離頂部多少畫素的css樣式，是用於兩個盒子隔離邊距用的，margin用於兄弟關係的盒子間距，而padding用於父子級的盒子間距。在程式設計上，這個其實是沒有布好局導致的，需要注意佈局方式層級關係。
    
  • 外邊距合併現象：

  • 兩個div上下拍咧，上div設定了margin-bottom，下div設定了margin-top，margin會合並，合併之後取較大的值作為兩個div之間的間距。

  • margin外邊距合併現象不需要解決，設定好值或者取其一即可。margin的塌陷問題是需要解決的，解決方法如下：

    • 給大盒子（父元素）加一個邊框border（border：1px solid transparent；或者border-top:1px solid transparent;）但是這樣會改變盒模型和設計檢視。不是很推薦，除非不影響頁面整體效果。
    • 給大盒子（父元素）設定一個overflow：hidden屬性
    • 浮動：float:left;
    • 等等，觸發BFC（塊級格式上下文）。
      
      • 在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。
      • BFC中的元素的佈局是不受外界的影響。並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
      • 浮動元素和絕對定位元素，非塊級盒子的塊級容器（eg： inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容建立新的BFC。
• 縮放法
  
  • 縮放的方式有 Zoom 和 transfrom：scale（）兩種

    1 . 支援的值型別不一樣。Zoom:（百分比值）zoom:50%，表示縮小到原來的一半；（數值）zoom:0.5，表示縮小到原來的一半。zoom:normal 等同於zoom:1。
    而 scale 並不支援百分比值和 normal 關鍵字，只能是數值。但是能負數，可以只控制1個維度。

    2 . 相對縮放位置不一樣。Zoom 的縮放是相對於左上角的；而scale預設是居中縮放；

    3 . Zoom 的縮放改變了元素佔據的空間大小（縮放後容器所佔據的空間是跟著一起縮放的）；
     而 scale 的縮放佔據的原始尺寸不變，頁面佈局不會發生變化（縮放後，容器所佔據的空間仍不變，會出現空白區域。）；

    4 . Zoom 和 scale 對元素的渲染計算方法可能有差異：zoom:0.5（銳利）； transfrom:scale(0.5)（模糊）；

    5 . 對文字的縮放規則不一致。Zoom 縮放依然受限於最小12畫素中文大小限制；而 scale 就是純粹的對圖形進行比例控制，文字50%原來尺寸。

    6 . 渲染的效能差異明顯。由於 Zoom 的縮放會改變元素的真實空間大小，在 dom 中 Zoom 加在任意一個元素上都會引起一整個頁面的重新渲染，而 scale 只是在當前的元素上重繪。因為 scale 變化時候，其原本的尺寸是不變的，就沒有 layout 的重計算；但是 Zoom 牽一髮動全身。

//zoom
 (function(fixWidth, id) {
        var ele = document.getElementById(id);
        function setZoom() {
            var cliWidth = document.documentElement.clientWidth || document.body.clientWidth;
            var blWidth = cliWidth / fixWidth;
            ele.style.zoom = blWidth;
        }
        window.addEventListener('resize', setZoom, false);
        setZoom();
    })(640, 'wrap'); //wrap是頁面最外層容器的id

• • 監聽resize事件，視窗大小改變的時候，執行setZoom，第一次執行的時候也設定一次。
  • setZoom函式先獲取螢幕解析度，然後通過設計稿來計算縮放比例。引數為（設計稿寬度640，頁面最外層容器id）；
  • 優點：可以按照設計稿尺寸進行頁面開發，頁面自動個根據瀏覽器的解析度進行縮放；
  • 缺點：高度是隨著寬度進行縮放比的，所以滑屏佈局用縮放來做自適應並不是很有利。
• Rem自適應：
  
  • 通過js來控制根目錄字號

(function() { 
    if(window.addEventListener)return;
    var html = document.documentElement;
    function setFont() {
            var cliWidth = html.clientWidth;
            html.style.zoom = blWidth;
        }
    document.addEventListener('DOMContentLoaded',setFont,false)
}
})();

rem vs Zoom ？ 各有千秋 擇需採用
Zoom相容PC和移動端，但是某些情況下回因為縮放導致定位出現錯亂，並且滑屏的瀏覽形式不適用。
rem是CSS3的單位，所以在移動端瀏覽器使用最優，滑屏的尺寸也是可以精確控制的。

• 模組和內容的自適應——適配方法
  
  • 對於模組：
    
    • 通過變化元素位置達到減少列數的目的，從而讓內容以合適的尺寸顯示，適應小螢幕裝置。
    • 通過隱藏或展開的方式對模組展示進行改變。
    • 對模組尺寸進行放大或者縮小。
    • 考慮增加或者刪減模組的數量。
  • 對於模組中的內容：
    
    • 考慮擠壓或拉伸內容容器的形狀。
    • 在內容排版上選擇換行或者平鋪。
    • 和模組類似，對內容進行增加或者刪減。

1.1.5 內容排布技巧

• 視訊與iFrame的自適應
  
  • 計算公式： W（元素當前百分比寬度）/ padding-bottom = 4/3 或16/9 或 16/10
• 水平垂直居中
  
  • 水平通過絕對定位和margin，對於行內使用text-align：center
  • 垂直居中使用display:box;需要注意的是要帶私有字首：-webkit-    -moz-