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

時間 2019-11-20

標籤簡單粗暴移動頁面開發技能欄目無線简体版

原文原文鏈接

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

大寬度用%，高度和小寬度所有使用rem，簡單粗暴。css

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

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

而我此次負責的項目爲公司剛上線的手遊內置網頁，展現遊戲公告和遊戲角色信息。html5

由於手遊是橫屏的，因此設計稿也有了些改變。內容儘量集中在橫向，減小用戶上下滑動的次數。因此設計師按照960px出的稿。java

前端步驟

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;

由於javascript代碼是最後加載的，因此打開頁面後會有短暫佈局混亂現象，以後js代碼才生效。函數

爲了解決這個問題，須要在頁面加載完成以前就運行這段js代碼。因此須要把這段代碼放到<head></head>裏。要注意的是這時jq插件還沒加載，因此要用原生的寫法。佈局

<script>
  function adjust(){
    // 設計稿寬度是960px
    var $html = document.getElementsByTagName('html')[0];
    var viewh = document.documentElement.clientWidth;
    var scale = viewh / 960;
    $html.style.fontSize = 100 * scale + 'px';
    alert("test");
  }
  // 進入、刷新頁面時執行函數，調整根字體
  window.onload=adjust();
  </script>

能夠測試一下，當頁面沒有任何內容的時候就會彈出「test」。測試

OVER!字體