手機端的適配問題

Betsy_迪發表於2018-11-07

如何做響應式佈局開發?

只要當前頁面需要在移動端訪問，必然加

<!--meta:vp [tab]-->
<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
複製程式碼
  • 不加VP，不管手機裝置有多寬，我們HTML頁面的寬度都是980（如果在320的手機上觀看HTML頁面，為了保證保證把頁面呈現全，需要HTML縮小大概三倍左右，所有內容都變小了），為了不讓頁面縮放，我們需要保證手機的寬度和HTML的寬度一致

width=device-width：讓HTML的寬度和裝置寬度保持一致

user-scalable=no:禁止手動縮放

  • 2、在js裡面新增vp
//=>JS中動態設定vp
var vp=document.createElement('meta');
vp.name='viewport';
vp.content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0';
document.head.appendChild(vp);
複製程式碼

REM響應式佈局開發

和px畫素一樣，它是一個CSS樣式單位 PX：固定單位 REM：相對單位（相對於頁面根元素[HTML]字型大小設定的單位）

真實專案中如何利用REM的這個特性實現響應式呢？

  • 1、嚴格按照設計稿中提供的尺寸進行樣式編寫（不管是寬高、還是MARGIN、還是字型等），例如：設計稿是7501336的，設計稿中有一個300150的圖片，我們佈局的時候依然按照300*150佈局...

  • 2、我們在編寫樣式的時候，不要使用PX單位，所有的單位都統一換算為REM（此時我們需要讓HTML的FONT-SIZE=100PX）

  • 3、上述完成後，在750的手機上是沒有任何問題的，但是在375的手機上肯定存在問題了（頁面太大了），此時我們需要讓頁面中的所有樣式，都整體縮小，才能達到響應式適配的目的

此時只需要把HTML的字型大小修改，那麼之前所有以REM為單位的樣式自動會跟著重新計算：

  • 750設計稿：1REM=100PX
  • 375的手機：375/750*100
  • 就是最新HTML的字型大小，也是最新REM和PX的換算比例

當前裝置的寬度/設計稿寬度*100=“當前手機下REM和PX的換算比例[HTML的字型大小]”`

REM等比縮放響應式佈局：目前市場上，如果單獨做移動端專案（專案只在移動端訪問，PC端有單獨的專案），我們選擇響應式適配的最佳方案就是REM佈局（當然細節處理可能會用到flex或者@media）

相關文章