簡單粗暴的移動端頁面開發技能

移動端響應式頁面開發說簡單也簡單，根據屏幕尺寸調節根字體大小。

大寬度用%，高度和小寬度全部使用rem，簡單粗暴。

之前閱讀過大漠老師的使用Flexible實現手淘H5頁面的終端適配,介紹了手淘項目的H5製作規範。

在手淘的設計師和前端開發協作過程中：手淘設計師常選擇iPhone6作為基準設計尺寸，交付給前端的設計尺寸是按750px * 1334px為準(高度會隨著內容多少而改變)。前端開發人員通過一套適配規則自動適配到其他的尺寸。

而我這次負責的項目為公司剛上線的手游內置網頁，展示游戲公告和游戲角色信息。

因為手游是橫屏的，所以設計稿也有了些改變。內容儘可能集中在橫向，減少用戶上下滑動的次數。所以設計師按照960px出的稿。

前端步驟

• 設置根字體大小

  html{font-size:100px;}

• js調節 1rem 對應的px大小

  $(document).ready(function() {
  // put all your jQuery goodness in here.
  function adjust(){
    // 設計稿寬度是960px
    var scale = $('body').width() / 960;
    $('html').css('font-size', 100 * scale + 'px');
  }
  // 進入、刷新頁面時執行函數，調整根字體
  adjust();
  //視口大小調整時執行函數，調整根字體
  // 目測游戲內置頁面用不到，用戶不會產生resize事件
  $(window).resize(function(){
    adjust();
  });
  });

• 樣式
  量取尺寸大小，換成對應的rem。比如：100px = 1rem;

網上關於響應式開發的優秀總結有很多，自己寫這篇只是初窺門徑，簡單粗暴，酌情使用。 —> __—>