響應式網站的實作過程及rem的動态計算

關于設計稿，rem的計算以及響應式網站的開發思路與流程

文章目錄

• 關于設計稿，rem的計算以及響應式網站的開發思路與流程
• • 關于px，rem，vw
  • 響應式網站的實作思路
  • 開發流程
  • • 使用rem實作自适應
    • 利用media實作web端與移動端的布局自動響應
    • 多份設計稿，如何設定根元素font-size？

上周做了小型的一個響應式網站，主要負責前端部分。使用Vue+CSS+ts實作，第一次寫響應式網站，加上對px，vw，rem等不太熟悉，浪費了很多時間走彎路。整理一下整體實作響應式網站的思路吧。

關于px，rem，vw

具體的概念就不說了，主要是rem的優勢在于使用rem為元素設定字型大小時，相對大小對比的是HTML根元素。是以隻修改根元素就能成比例地調整所有大小，并且能保證在不同寬度和尺寸的裝置中能在維持布局不變的情況下對所有元素成比例縮放。

是以，即使設計師給的設計稿是按照px為機關設計的，但是前端需要經過轉換，在CSS中使用rem機關。

響應式網站的實作思路

響應式網站及根據不同的裝置自适應響應的布局，主體可以分為兩類：

1. web端與移動端的不同，即針對這類不同終端裝置最好需要兩份設計稿，根據web端與移動端重寫兩份CSS樣式布局。
2. 在每一類終端上，也需要根據螢幕的不同進行大小适配，這一部分，主要利用上面所說的rem來實作。

開發流程

使用rem實作自适應

首先，在網頁代碼(index.html)的head中，加入一行viewport元标簽。

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

其中：

1. width=device-width 把布局視口設定成為浏覽器（螢幕）的寬度。
2. initial-scale=1 的意思是初始縮放的比例是1，使用它的時候，同時也會将布局視口的尺寸設定為縮放後的尺寸。而縮放的尺寸就是基于螢幕的寬度來的，也就起到了和width=device-width同樣的效果。
3. viewport是網頁預設的寬度和高度，上面這行代碼的意思是，網頁寬度預設等于螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占螢幕面積的100%。

在js中應用

• 1920是所給的設計稿寬度，代表1920px。
• clientWidth為浏覽器實際寬度。

這裡的設計稿是1920px，若有一進制素在設計稿上的寬度為100px,實際裝置實體寬度為960px，即剛好為設計稿的一半，是以這時該元素在裝置上的實際寬度

100*（960/1920）=50px

，也就是需要設計其寬度為100rem。

而一般浏覽器會設定最小字型（例如chrome的最小字型為12px）,如果html的font-size為上述的

960/1920

,相當于為0.5px,會造成一些錯誤。是以,一般會将計算後的結果乘100,即在CSS中，隻需對照着設計稿，将機關為px的元素除100，即可轉換成rem格式.

利用media實作web端與移動端的布局自動響應

對于網站的響應式實作，可以使用bootstrap或其他的庫和模闆，但最簡單最直覺的應該還是CSS3引入的

@media查詢

,可以針對不同的螢幕寬度定義不同的樣式。

@media screen and (max-width: 400px) {
    /*
    此處樣式應放在css檔案的最後
    */
}
           

注意：

• 若media與主題CSS放在同一個檔案中，需要注意代碼順序。這裡就又牽扯到CSS的優先級問題了。即在CSS中是越靠後的優先級越高，若将查詢部分的css寫在前面，即使滿足查詢條件，後面的css也會将前面的樣式覆寫掉。
• 使用

  max-width

  與

  min-width

  時，代碼順序也不一樣。若使用的是max-width，需要根據螢幕寬度從大到小的代碼順序；使用min-width時，需要根據從小到大的順序。原因，也是上一點提到的優先級問題。
• 除第一點提到的之外，還需要注意media查詢隻能改變符合條件的元素樣式，即樣式是層疊的，若想根據不同的螢幕寬度适配獨立的css，需要多份CSS檔案。

多份設計稿，如何設定根元素font-size？

一般來說，設計師會提供兩份設計稿，一份web端，一份移動端。也就是需要根據螢幕寬度動态設定html的font-size。(這次項目設計師剛開始隻給了一份web端的設計稿，寬度為1920px…然後我隻用media調了一下字型大小，整體布局沒改，在手機上的效果…一言難盡)

這裡隻是很簡單的查詢螢幕寬度和使用一個if語句，一般認定螢幕寬度小于750px的移動端，反之為web端。

當然有更好的适配方法，但這個肯定是最簡單的。

(function () {
  var designW1 = 1920; //設計稿寬，我這次的web端設計稿是1920*1080的
  var font_rate = 100; 
  var designW2 = 375;//移動端設計稿寬，一般按照iphone6的裝置寬度來設計。

  if (document.documentElement.clientWidth > 750) {
    //适配
    document.getElementsByTagName("html")[0].style.fontSize = (document.documentElement.clientWidth) / designW1 * font_rate + "px";

    //監測視窗大小變化
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
      document.getElementsByTagName("html")[0].style.fontSize = (document.documentElement.clientWidth) / designW1 * font_rate + "px";
    }, false);
  } else {
    //适配
    document.getElementsByTagName("html")[0].style.fontSize = (document.documentElement.clientWidth) / designW2 * font_rate + "px";

    //監測視窗大小變化
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
      document.getElementsByTagName("html")[0].style.fontSize = (document.documentElement.clientWidth) / designW2 * font_rate + "px";
    }, false);
  }

})();
           

相關連接配接：

• 一步步教你使用rem适配不同螢幕的移動裝置
• HTML5+CSS3的響應式網頁設計：自動适應螢幕寬度
• rem是如何實作自适應布局的？