移動端的適配及佈局

天才櫻木花道發表於2019-02-16

一. 畫素

  1. 螢幕解析度
    指在橫縱座標的畫素點，單位是 px，1px = 1 畫素點
    iphone6 750*1334
    螢幕畫素密度：螢幕上每英寸可以顯示的畫素點的數量
    螢幕解析度，畫素密度都是裝置廠商規定的，不能修改

  2. 畫素
    物理畫素：任何裝置的物理畫素的數量都是固定的，它是螢幕能顯示的最小粒度。
    CSS畫素： CSS 畫素是一個抽象的單位，主要用於瀏覽器確定 Web 頁面的內容。
    在普通屏下，一個 CSS 畫素對應一個裝置畫素

    CSS 畫素與 物理畫素的關係：

       1. 螢幕特性
   2. 使用者縮放的行為

二. 視口

    1. layout viewport(佈局視口)
      它是一個容器，用來裝下 PC 端的頁面
      預設的佈局視口都是 980， IE 是1024
      一般移動端的頁面有兩套方案，一是寫兩套頁面，一個是響應式佈局。
    2. 視覺視口
      視覺視口與裝置螢幕的區域一樣寬，畫素值是 CSS 畫素決定的。

    3. 理想視口
      佈局視口的預設寬度並不是一個理想的寬度，對於移動裝置來說，最理想的情況是使用者進入介面不再進行縮放。只有專門為移動裝置開發的網站，才有理想視口這麼一說

       <meta name="viewport" content="width=device-width"/>

      width：佈局視口的寬
      device-width：裝置獨立畫素的值

      當加上 meta，裝置獨立畫素 = CSS 畫素 = 375

      沒有 meta：

        物理畫素： 750
  裝置獨立畫素：375
  CSS 畫素：980
  同一個元素，在不同的裝置上，呈現的效果一樣，等比

      有 meta：

        物理畫素： 750
  裝置獨立畫素：375
  CSS 畫素：375
  同一個元素，在不同的裝置上，呈現的效果不一樣，不等比

      dpr(畫素比) = 物理畫素/裝置獨立畫素

    1. 移動端縮放：佈局視口永遠不變

        放大：CSS3 畫素面積變大，元素畫素值不變，視覺視口反而是變小了
  從技術層面上來講，縮放就是放大或縮小 CSS 畫素面積的過程，改變的是視覺視口的尺寸。

    三. 事件

    1. 手指按下
ontouchstart
2. 手指移動
ontouchmove
3. 手指離開
ontouchend

取消瀏覽器的預設行為
document.addEventListener("touchstart", function(event) {
    event.preventDefault()
})

移動端的準備工作：
    1. meta標籤
    2. 清除預設樣式
    3. 清除系統滾動條
    4. 取消預設行為
    5. 適配
    6. 點透處理
                                                                                    

點透處理方案：
    1. 讓 a 元素不能進行跳轉，禁止瀏覽器的預設行為
    2. box 盒子消失，點選 a 元素，a 元素該去跳轉
    
    document.addEventListener("touchstart", function(){
        event.preventDefault()
    })
    
    var aTags = document.querySelectorAll(`a`)
    
    for (var i = 0;i < a.length;i++) {
        aTags[i].addEventListener("touchstart", function(){
            window.location.href = this.href
        })
    }

    豎向滑屏

    // 手指按下(父元素繫結事件) 

// 手指移動(不需要巢狀在按下事件中)

如果手指抬起來的時候沒有額外的動作，就不需要寫手指抬起事件

    四. 適配

    em: 參照自身的字型大小
rem：參照根元素的字型大小(html,預設16px)

    rem 適配原理：

    1. 頁面中的所有元素，單位都是 rem
2. 把整個螢幕的寬度設定成根元素的字型大小(1 rem = 375px)

var styleNode = document.createElement(`style`)
    • rem 適配

    圖紙較大，750，1080 頁面元素較多

    • viewport 適配

    設計圖紙較小 320

    • 百分比適配

    頁面比較少

    • 媒體選擇器(響應式佈局)

    在不同的螢幕上，頁面佈局不一樣

    • 具體畫素

    dpr = 2 = 物理畫素/CSS 畫素

    相關文章