移動端適配方案

alisa.huang發表於2024-07-17

移動端適配方案

1、媒體查詢

媒體查詢的使用還能節省開發時間和成本，因為開發人員只需編寫一次程式碼，就可以適應多種裝置。同時，它還可以根據裝置的特性選擇最適合的圖片、字型和其他資源，從而減少頁面載入時間，提高網站的效能。響應式設計是一種現代網頁設計方法，它可以使網頁在不同的裝置和螢幕大小上呈現出合適的佈局和樣式。總之，媒體查詢對於現代網頁開發來說至關重要。它提供了一種簡單而有效的方式來建立自適應佈局，提高使用者體驗，並使網頁設計更加靈活和現代化。

2、flexible 方案（動態 rem 方案）

動態rem適配方案的流程：

  • meta 標籤設定 viewport 寬度為螢幕寬度；
  • 根據不同螢幕修改根元素 font-size 大小，一般設定為螢幕寬度的十分之一（可引入 lib-flexible 庫，或者自己寫相應邏輯）；
  • 開發環境配置 postcss-px2rem 或者類似外掛；
  • 根據設計稿寫樣式，元素寬高直接取設計稿寬高即可，單位為 px，外掛會將其轉換為 rem；
  • 段落文字也按照設計稿寫，單位為px，不需要轉換為 rem；

lib-flexible 其核心程式碼如下：

(function flexible (window, document) {
  var docEl = document.documentElement
  
 	// 根據螢幕寬度設定根元素字型大小，set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
}(window, document))

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，對於2和3的屏，用2倍的方案，其餘的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他裝置下，仍舊使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

　　

3、Viewport 方案

即將視覺視口寬度 window.innerWidth 和視覺視口高度 window.innerHeight 等分為 100 份。1vw 等於視口寬度的1%

vw 適配方案的流程：

  1. meta 標籤設定 viewport 寬度為螢幕寬度；
  2. 開發環境配置 postcss-px-to-viewport 或者類似外掛；
  3. 根據設計稿寫樣式，元素寬高直接取設計稿寬高即可，單位為 px，外掛會將其轉換為 vw；
  4. 段落文字也按照設計稿寫，單位為px，不需要轉換為 vw；

當然，沒有一種方案是十全十美的，vw同樣有一定的缺陷：

  • px轉換成vw不一定能完全整除，因此有一定的畫素差。
  • 比如當容器使用vw，margin採用px時，很容易造成整體寬度超過100vw，從而影響佈局效果。當然我們也是可以避免的，例如使用padding代替margin，結合calc()函式使用等等...

相關文章