亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

rem布局設(shè)置

jayce / 2955人閱讀

摘要：基本介紹全稱，是一種相關(guān)參考坐標(biāo)，即在根結(jié)點(diǎn)設(shè)置基本的字體大小一般是根，其他節(jié)點(diǎn)的所有的字體大小都是相對于根結(jié)點(diǎn)而已。示例隨著屏幕的寬高的變化，動(dòng)態(tài)設(shè)置節(jié)點(diǎn)的屬性屬性根據(jù)設(shè)計(jì)圖的尺寸做相應(yīng)的調(diào)整。

rem基本介紹

rem全稱font size of the root element，是一種相關(guān)參考坐標(biāo)，即在根結(jié)點(diǎn)設(shè)置基本的字體大?。ㄒ话闶歉鵫tml），其他節(jié)點(diǎn)的所有的字體大小都是相對于根結(jié)點(diǎn)（html）而已。

示例

隨著屏幕的寬高的變化，動(dòng)態(tài)設(shè)置html節(jié)點(diǎn)的fontSize屬性. width屬性根據(jù)設(shè)計(jì)圖的尺寸做相應(yīng)的調(diào)整。 通過如下的方式，可以直接通過將設(shè)計(jì)圖上的px值除以100即為當(dāng)前的設(shè)置的元素屬性值。

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";
}
其他

如果設(shè)計(jì)圖的屬性固定，不常變化，可以直接將如下代碼設(shè)置在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);

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115431.html

相關(guān)文章

  • vw+rem移動(dòng)端自適應(yīng)布局

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

    Little_XM 評論0 收藏0

  • 移動(dòng)端rem布局的學(xué)習(xí)（基于自己寫的一個(gè)網(wǎng)易云播放頁面的思考）

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

    wums 評論0 收藏0

  • 移動(dòng)端rem布局的學(xué)習(xí)（基于自己寫的一個(gè)網(wǎng)易云播放頁面的思考）

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

    he_xd 評論0 收藏0

  • 移動(dòng)端自適應(yīng)布局方案

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

    zacklee 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<