移動端概述和hybird模式、響應式佈局

移動端：運行在移動設備上的產品

移動設備：手機、平板、touch...

咱們之後作的產品大部分都只須要適配IOS系統和安卓系統便可

響應式佈局：在不一樣的設備上都能給予客戶最好的操做體驗

產品：

APP：手機應用，目前市面上流行的APP產品大部分都是原生APP開發者作的，可是目前市場上正在趨於使用JS來開發原生的APP：react native、phoneGap...

H5：HTML頁面，都是運行在瀏覽器中的(PC端瀏覽器或者移動端的瀏覽器)

之後工做中咱們這一類前端開發工程師主要作的產品形態都有那些：

    PC和移動端公用一套項目的：作一個HTML頁面須要在pc端訪問，也須要在移動端訪問

    PC端和移動端用的是不一樣的項目：例如，京東、淘寶....pc端不須要作響應式，移動端須要作響應式

    在移動端咱們開發出來的HTML頁面(H5)運行的環境：

    移動端的瀏覽器：UC、QQ、百度...

    原生APP(Native App)的webView中：hybride模式   例如：在微信中打開一個H5頁面，咱們的H5其實就是一個運行在微信的webView中，

 

hyBride模式：http://old.zhufengpeixun.cn/qianduanjishuziliao/mobileDevelopment/2017-01-09/677.html   // 把握麼開發的H5頁面嵌入到Native APP的webView中運行(所謂的webView你能夠簡單的理解爲一個瀏覽器，也是webkit內核)

 

響應式佈局：

    搭建一個H5頁面，咱們須要在HEAD中添加一個META標籤:

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

    viewport:視口    Width=device-width 設置視口的寬度等於設備的寬度，若是不設置的話，默認是扣的寬度爲980px，通俗的講：咱們這個操做其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展現當前頁面的區域一共有多寬(瀏覽器的寬度)

    user-scalable=no：禁止用戶手動縮放

    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0：設置屏幕最大、最小、默認的縮放比例

    高清屏：蘋果手機是2倍高清屏幕的，也就是咱們在手機上看到的那張100*100，其實蘋果手機是按照200*200的尺寸給咱們進行渲染的，這樣的話，若是咱們真實圖片自己才100*100，最後呈現出來的就是被拉伸後變模糊的效果

    -> 蘋果手機上須要的素材圖片都須要比看到的尺寸大一倍才能夠

DPI適配思想：

    咱們在作頁面的時候，最好每一張素材圖片都準備兩套或者三套，一倍圖、二倍圖、三倍圖

媒體查詢：@media

    媒體設備：all 全部設備，screen 全部屏幕設備(pc+移動端) print打印機...

    媒體條件：指定在什麼樣的條件下執行對應的樣式

   

    講解meta的文章：http://old.zhufengpeixun.cn/qianduanjishuziliao/mobileDevelopment/2016-07-02/480.html

    JS動態設置viewport：

    var meta = document.createElement("meta");

    meta.name="viewport";

    meta.content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0";

    documeng.head.appendChild(meta);

響應式佈局的解決方案：

    一、流試佈局法：

        容器或者盒子的寬度通常都不寫固定值，而是使用百分比，相對於視口區域的百分比

        其他的樣式：字體、高度、margin、padding等等都按照實際尺寸來設置

        對於有些尺寸下，咱們設置的固定值看起來不是特別的好看的話，使用media來進行調整

    特殊狀況下：設計的是設計稿是640px，咱們的素材圖也是640px的，這樣的話在ipone6/6 plus戰士的時候，圖片不夠大，對於這種狀況咱們須要單獨找設計師要一張更大的圖

    @media all and (-webkit-min-device-pixel-ratio:2) and (min-width:320px){  }

    @media all and (min-width:641px){  }

   

移動端之meta初設

    <meta name="format-detaction" content="telephone=no" /> 禁止把數字自動識別爲電話號碼

    若是當禁止自動識別電話號後，還想讓某一個數字變爲電話號，那就用a標籤<a href="tel:234567"></a>//識別爲電話     <a href="email:1234567"></a>識別爲郵箱    <a href="sms:1234567"></a>自動發短信

REM響應式佈局：

    —>咱們作的H5頁面只在移動端訪問(REM不兼容低版本的瀏覽器)

        REM：當前頁面中元素的REM單位的樣式值都是針對HTML元素的fontSize的值動態計算的

    第一步：給樣式中的HTML設置一個fontSize的值， 設置多少就等於1rem；好比設置的爲100px，就100px = 1rem；

    第二步：寫樣式的時候，徹底按照設計稿的尺寸來寫樣式，不用管任何的轉換，設計稿給的寬度、高度、字體大小、margin、padding的值是多少咱們就寫多少，可是咱們在寫樣式值煩人時候，須要把獲得的像素值除以100，計算出對應的rem的值，咱們設定的也就是rem的值

        值得注意的是：真實項目中外層盒子的寬度，咱們通常不寫固定值，沿用流式佈局法的方式進行佈局，使用百分比的方式佈局

    第三步：根據當前屏幕的寬度和設計稿的寬度來計算咱們HTML的fontSize的值    

        設計稿：640    600*300    fontSize=100  6rem*3rem

        手機：320    300*150    fontSize=50

        手機：375    （375/640）*100

 

        根據當前屏幕寬度和設計稿寬度的比例，動態計算一下當前寬度下的fontSize值應該是多少，若是fontSize的值改變了，以前設置的全部的rem單位的值自動會跟着放大和縮小

    京東解決方案：

    ~function(){

        var desw = 640,

            winw = document.documentElement.clientWidth,

            ratio = winw/desw;

            //若是當前屏幕的寬度已經大於640了，爲了保障圖片的良好展現，咱們就不在繼續變大了，以設計稿的寬度爲最後的寬度，剩餘的部分留空白顯示在中間

            var omain = document.getElementById("main")

            if(winw>desw ){

                omian.style.width = desw + "px";

                omain.style.margin = "0 auto";

                return;

            }

            document.documentElement.style.fontSize = ratio * 100 + "px";

    }

 

    有些時候須要檢測一下當前的瀏覽器是pc端仍是移動端的

        若是當前的瀏覽器是pc端，可是咱們訪問的頁面是移動端的頁面，咱們讓其跳轉到pc端的頁面

        若是當前的瀏覽器是移動端的，可是咱們訪問的頁面是pc端的頁面，咱們讓其頁面跳轉到移動端的頁面

        跳轉：window.location.href='網址'