移動端自適應詳解

一、移動端自適應插件

移動端自適應插件是一種通過js文件進行頁面縮放的方法，常見的有Flexible和rem.js兩種插件。

其中，Flexible是將頁面分為10份，其中1份為1/10屏幕寬度，通過設置字體大小來控制比例，同時還需要設置標籤viewport的內容為「width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no」以適配不同解析度的手機。

rem.js則是通過設置一個基準像素值，將設備寬度分為同樣的比例劃分，以rem為單位進行頁面布局和調整。

//Flexible插件示例
(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
  setRemUnit()
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document));

二、移動端自適應方案

移動端自適應的方案有很多，常見的有基於rem的布局、基於百分比的布局、flex布局等。

其中，基於rem的布局適用於需要更精細的自適應的場景，如有多種機型需要適配；基於百分比的布局則是比較簡單直接，一般適用於單一機型的情況。

flex布局則相對較新，需要瀏覽器支持，並且需要處理兼容性問題，但是對於水平和垂直居中、分散對齊等場景可以實現較為靈活和方便的布局。

//flex布局示例
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

三、移動端自適應怎麼做

移動端自適應的實現需要從以下幾個方面入手：

1、meta標籤設置：需要設置viewport適配不同解析度的手機。

2、字體大小設置：通過JS進行計算並設置字體大小，以保證不同寬度的設備顯示效果的一致性。

3、布局適配：使用rem、百分比或者flex等布局方式進行適配，並通過媒體查詢判斷不同寬度設備的適配方案。

4、高度自適應：通過設置高度為100vh，並通過JS進行動態獲取可視窗口高度來實現高度的自適應。

//高度自適應示例
function setHeight() {
  var screenHeight = document.documentElement.clientHeight;
  document.querySelector(".container").style.height = screenHeight + "px";
}
setHeight()
window.addEventListener('resize', setHeight);

四、移動端自適應方式

移動端自適應方式包括橫向自適應和縱向自適應兩種方式。

橫向自適應包括rem、百分比、vw等方式，其中rem需要JS計算，百分比和vw則可以直接設置。

縱向自適應則可以通過高度自適應來進行，或者通過彈性布局實現高度動態調整。

五、移動端自適應布局如何實現

移動端自適應布局的實現需要遵循以下步驟：

1、設置meta標籤viewport。

2、動態計算字體大小，設置rem字型大小或者直接設置百分比字型大小。

3、設計布局方案，包括元素大小、間距、相對位置等。

4、通過寫好的CSS樣式表和JS腳本實現頁面自適應。

六、移動端自適應解析度

移動端自適應需要適配不同的解析度和機型，在通用尺寸的基礎上，可以根據具體的需求進行適當的調整，以符合不同的設備規格。

目前市面上主流的移動設備解析度都比較統一，一般以iPhone6的375px為標準，但也有其他尺寸的設備，如ipad、小米、三星等，需要根據實際情況進行適配。

七、移動端html自適應布局

移動端html自適應布局一般使用rem或百分比進行適配，其中rem需要JS計算對應的字體大小，而百分比可以直接根據設備寬度進行計算。

在設計頁面元素時，需要保證元素寬度和高度的單位都是rem或者百分比，以避免元素位置和大小出現偏差。

八、移動端字體大小自適應

移動端字體大小自適應一般使用rem或百分比進行適配，在頁面載入時動態計算對應的基準值，然後通過CSS設置不同元素的字體大小。

需要注意的是，不同設備的字體大小習慣也不同，需要針對不同地區和目標用戶選擇合適的字體大小。

九、移動端高度自適應方法

移動端高度自適應方法一般使用百分比或vh進行適配，並通過JS對高度進行動態調整。

需要注意的是，如果有包含在頁面中的iframe元素，需要對內部頁面的高度進行動態監聽，並根據內部頁面高度的變化來調整外圍元素高度，以避免高度出現異常。

十、前端自適應布局選取

前端自適應布局選取需要根據實際情況選擇，並結合不同的適配方案進行實現。

在選取布局方案時需要考慮到靈活性、兼容性、可維護性等因素，並根據實際情況進行調整和優化。