移動端開發小結

weixin_34162695發表於2018-09-18

前言

會了PC端開發就會了移動端開發，這個說法沒錯，只是點選(click)事件變成了觸屏事件（touch）,滑輪滾動(scroll)變成了拖曳(scroll)事件。下面就說一下移動端開發的一些坑與技巧。

關於佈局

適配移動端

重點：移動端佈局一定要在head上加一句話：

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

目的：讓整個螢幕顯示寬度和手機寬度相等，方式使用者縮小和放大。

媒體查詢

移動端佈局和PC端佈局相差很多，當我們縮小時候，某些元素會發生改變，這樣會影響使用者體驗，所以CSS3出現了新的屬性 媒體查詢（media query）
CSS程式碼片段：

 @media only srceen and max-width(600px)  and min-width(400px) {
        body{background-color:red;}
  }//螢幕在400px~600px之間背景顏色為紅色
 @media only srceen and max-width(1000px)  and min-width(600px) {
        body{background-color:blue;}
  }//螢幕在600px~1000px之間背景顏色為藍色

這樣我們可以根據不同的螢幕大小來切換響應的佈局。

互動方式

手機端的互動方式不一樣

  • PC有hover偽類 移動端沒有
  • 移動端 touch 事件
  • PC有resize 移動端沒有
  • PC需要滾動條 移動端不需要

PS:電商網站已經不再使用媒體查詢了，主要是通過不同螢幕大小來判斷使用裝置，載入不同的檔案實現。 而一些新聞類網站還在使用。

關於字型

在移動端開發中，字型大小問題一直困擾著開發者，但是根據MDN提供的方案，我們可以找到一些方案。

1. 什麼是px?

px就是簡單的畫素單位，適用於固定值

2. 什麼是vh/vw?

vh = viewport height = 100vh就是佔滿全屏高度 vh單位前的值是百分比
vw = viewport width = 100vw就是佔滿全屏寬度 值同上

3. 什麼是em?

寬泛的說是一個m的字型大小，但是應用的時候都會說是一個漢字的大小，主要em繼承自身的font-size,如果沒有定義font-size會繼承父親的font-size。

4. 什麼是 rem?

rem = root em 繼承根元素的font-size，一般都是html的font-size

5. rem 和 em 的區別是什麼?

區別就是rem只繼承根元素的font-size,em繼承自身的font-size,兩者沒有關係。

手機端方案的特點是什麼

所有手機顯示的介面都是一樣的，只是大小不同
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/10+'px;}</style>') //根據頁面的寬度來設定根元素font-size
 </script>

這是一種根據螢幕大小來更改字型大小的解決方案，具有很高的靈活性
當然REM 可以與其他單位同時存在

 font-size: 16px;
 border: 1px solid red;
 width: 5rem;

小結：

CSS3提供了媒體查詢屬性，我們可以根據不同的螢幕來設計不同的頁面，Rem方案讓我們的佈局在不同的裝置下都能等比例的顯示，有了這樣的思路，這樣我們在移動端的開發會更加順暢。

相關文章