移動端適配的幾種解決辦法

時間 2021-08-14

標籤 css html ide 佈局設計 code htm 開發 rem 欄目無線简体版

原文原文鏈接

所謂移動端適配，就是WebApp在不一樣尺寸的屏幕上等比顯示css

原則html

開發時方便，寫代碼時設置的值要和標註的 160px 相關
方案要適配大多數手機屏幕，而且無 BUG
用戶體驗要好，頁面看着沒有不適感

思路ide

寫頁面時，按照設計稿寫固定寬度，最後再統一縮放處理，在不一樣手機上都能用
按照設計稿的標準開發頁面，在手機上部份內容根據屏幕寬度等比縮放，部份內容按須要變化，須要縮放的元素使用 rem, vw 相對單位，不須要縮放的使用 px
固定尺寸+彈性佈局，不須要縮放

viewport 適配佈局

<meta name="viewport" content="width=750,initial-scale=0.5">

initial-scale = 屏幕的寬度 / 設計稿的寬度。通常設計稿的尺寸是實際開發尺寸的2倍。開發的時候根據設計稿/2便可。設計

<head>
  <script>
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width / WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}

相關標籤/搜索