国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動端rem.js使用方法

JessYanCoding / 676人閱讀

摘要：實際應用起來就是，而調用了就是以此類推。。下面附圖，看效果代碼小米官網的寫法首頁這里的只對字體大小高度行高做了換算，其他的沒做，只是給大家看一個效果。

下面的代碼一是我根據rem的使用經驗，自己寫的一個rem.js，發現很好用，能適用所有移動端h5頁面的自適應需求：

代碼一：


window.onload = function(){
    /*720代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這里寫100是
      為了以后好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/
    getRem(720,100)
};
window.onresize = function(){
    getRem(720,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}

下面的代碼二，是我在小米網上看到的移動端h5頁面自適應代碼，效果跟我的一樣，也可以使用：

代碼二： 小米官網的寫法


!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

看這兩個函數，把這些代碼放到js里面，規則就是，調用函數，放兩個參數，第一個參數，是設計稿的寬度，第二個參數是px與rem的轉換比例，通常會寫100（因為好算）；當然了，要把這段js代碼最好封裝在一個多帶帶的js文件里，并且放在所有的css文件引入之前加載。
實際應用起來就是，#box1{ height:100px;}而調用了rem就是#box1{ height:1rem;}以此類推。 100px = 1rem . 1px = 0.01rem。在頁面中，凡是跟尺寸有關的padding、margin、width、height等等，都可以用rem來寫單位，這樣當不同分辨率的手機在看同一個頁面時，效果幾乎是一樣的。

下面附圖，看效果：

代碼：




    
    Document
    
    
    
    


    

        
首頁

這里的demo只對字體大小、高度、行高做了rem換算，其他的沒做，只是給大家看一個效果。就到這了，希望點贊哦！

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

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

相關文章

  • vue 移動端屏幕適配 使用rem

    摘要：要想移動端適配并使用您需要先看這篇文章，配置好在中使用，就可以使用了如果項目已經開發的差不多了，沒有用到又要使用，您用這招。如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力要想移動端適配 并使用 rem 您需要先看這篇文章，配置好less ??在vue 中使用 less，就可以使用rem了 如果項目已經開發的差不多了，沒有用到rem 又要使用rem，您用這招。 postcs...

    番茄西紅柿 評論0 收藏0

  • 【移動適配】移動Web怎么做屏幕適配（一）

    摘要：屏幕適配是一個很容易被忽略的問題，但對于精益求精的產品而言，是必不可少的。對于開發的求職者而言，也是一個必需要理解清楚的經典問題文啃先生壹移動端適配的是什么我們討論的是網頁適配多種尺寸屏幕，讓網頁效果看起來和設計師的設計稿一樣。 屏幕適配是一個很容易被忽略的問題，但對于精益求精的產品而言，是必不可少的。對于Web開發的求職者而言，也是一個必需要理解清楚的經典問題 文 | 啃先生 Mar...

    huangjinnan 評論0 收藏0

  • Web網頁布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態局部頁面元素位置發生改變，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。即創建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態布局（static layout） 　　即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態...

    blastz 評論0 收藏0

  • Web網頁布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態局部頁面元素位置發生改變，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。即創建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態布局（static layout） 　　即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態...

    shiina 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<