rem布局設置

jayce 發布于2019-08-30 13:16 / 2901人閱讀

摘要：基本介紹全稱，是一種相關參考坐標，即在根結點設置基本的字體大小一般是根，其他節點的所有的字體大小都是相對于根結點而已。示例隨著屏幕的寬高的變化，動態設置節點的屬性屬性根據設計圖的尺寸做相應的調整。

rem基本介紹

rem全稱font size of the root element，是一種相關參考坐標，即在根結點設置基本的字體大小（一般是根html），其他節點的所有的字體大小都是相對于根結點（html）而已。

示例

隨著屏幕的寬高的變化，動態設置html節點的fontSize屬性. width屬性根據設計圖的尺寸做相應的調整。通過如下的方式，可以直接通過將設計圖上的px值除以100即為當前的設置的元素屬性值。

window.addEventListener("resize", this.setFontSize);
function setFontSize() {
    var designedWidth = this.props.width;
    let actualWidth = Math.min(450, $(window).width());
    document.documentElement.style.fontSize = actualWidth * 100 / designedWidth + "px";
}

其他

如果設計圖的屬性固定，不常變化，可以直接將如下代碼設置在html中

(function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          clientWidth = clientWidth>750?750:clientWidth;
          docEl.style.fontSize = Math.floor (100 * (clientWidth / 750)) + "px";
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener("DOMContentLoaded", recalc, false);
    })(document, window);

云服務器 GPU云服務器 rem布局 listview布局設置標簽布局顯示設置 rem

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115431.html

vw+rem移動端自適應布局

摘要：本文同步發布于我的個人博客上移動端自適應布局不管是面試還是工作過程中，移動端的布局都比較常見，而移動端適配方法也是多種多樣。表示當前視口寬度的百分之一。同時在移動端，的兼容性還不錯，完全可以直接使用。這樣完成了一個簡單好用的移動端布局了本文同步發布于我的個人博客上 - vw+rem移動端自適應布局不管是面試還是工作過程中，移動端的布局都比較常見，而移動端適配方法也是多種多樣。一般來...

Little_XM 2019-08-30 11:09 評論0 收藏0
移動端rem布局的學習（基于自己寫的一個網易云播放頁面的思考）

摘要：最近在看關于移動端的響應式布局，其中涉及到比較多的就是大小屬性的設置等等，今天自己就捋一捋的用法。然而萬一不能用該怎么辦啊，所以還是要學會自己寫原生的頁面布局，也就會有今天的這篇文章了。的使用是指相對于根元素的字體大小的單位。對于一個前端的初學者來說，首先要做好的事就是切頁面了，切頁面不得不說的就是布局了，布局的重要性不言而喻，為了良好的用戶體驗，提出了許多不一樣的布局：響應式布局，...

wums 2019-08-21 17:36 評論0 收藏0
移動端rem布局的學習（基于自己寫的一個網易云播放頁面的思考）

摘要：最近在看關于移動端的響應式布局，其中涉及到比較多的就是大小屬性的設置等等，今天自己就捋一捋的用法。然而萬一不能用該怎么辦啊，所以還是要學會自己寫原生的頁面布局，也就會有今天的這篇文章了。的使用是指相對于根元素的字體大小的單位。對于一個前端的初學者來說，首先要做好的事就是切頁面了，切頁面不得不說的就是布局了，布局的重要性不言而喻，為了良好的用戶體驗，提出了許多不一樣的布局：響應式布局，...

he_xd 2019-08-29 13:48 評論0 收藏0
移動端自適應布局方案

摘要：背景現在工作中有超過一半的時間用于移動端項目的開發，包括嵌入頁，微信頁面和移動頁。經過研究，我在公司的多個移動端項目使用了布局來解決移動端自適應布局的問題。簡單的說它就是一個相對單位，布局是一個流行的解決移動端響應式布局的方案。背景現在工作中有超過一半的時間用于移動端項目的開發，包括app嵌入頁，微信頁面和移動wap頁。開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式布...

zacklee 2019-08-26 11:50 評論0 收藏0