移動端配適與掌握動態 REM

kari發表於2019-04-16
REM

移動端配適

媒體查詢（響應式）

media query：自動探測螢幕型別及寬度，符合條件時載入 css 樣式。

link 標籤中的 css 媒體查詢：

<link rel="stylesheet" href="style1.css" media="(min-width: 400px) and (max-width: 1000px)">
// 當螢幕大於 400px 並且小於 1000px 時，引用 style1.css 樣式表
複製程式碼

html 中的 css 媒體查詢：

<script>
    @media( min-width: 400px and max-width: 800px){
        body{
         background: red;
        }
    }
</script>
// 當螢幕大於 400px 並且小於 1000px 時，body 的背景色為紅色
複製程式碼

meta viewport

開發移動端介面時，一定要加這句程式碼：

<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: 預設網頁寬度等於螢幕寬度；
  • user-scalable=no: 禁止使用者縮放；
  • initial-scale=1.0: 原始縮放比例為 1.0；
  • maximum-scale=1.0: 最大縮放比例為 1.0；
  • minimum-scale=1.0: 最小縮放比例為 1.0。

移動端特點

  • 沒有 hover 偽類
  • 有 touch 事件
  • 沒有 resize 屬性
  • 沒有滾動條

動態 REM

REM

在 css 中有很多長度單位，比如：

  • px 表示一個畫素點；
  • em 表示元素的font-size的計算值（一個M的寬度）；
  • vh 視口高度的 1/100；
  • vw 視口寬度的 1/100。

rem 也是一個長度單位，這個單位代表根元素（html）的 font-size 的大小。

em 和 rem 的區別：em 取自己的 font-size 計算值，rem 取根元素的 font-size 計算值。

網頁上的字型大小預設是 16px。

移動端方案的特點

  • 所有手機顯示的介面都是一樣的，只是大小不同
  • 1 rem == html font-size == viewport width

使用 JS 動態調整 REM

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
     var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
 </script>
複製程式碼

上面程式碼，將根元素的 font-size 設定為裝置寬度。寫頁面的時候，直接使用 rem 單位作為長度單位，便可以實現自適應佈局。

REM 可以與其他單位同時存在

 font-size: 16px;
 border: 1px solid red;
 width: 0.5rem;
複製程式碼

相關文章