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

資訊專欄INFORMATION COLUMN

移動端rem.js使用方法

JessYanCoding / 670人閱讀

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

下面的代碼一是我根據(jù)rem的使用經(jīng)驗(yàn)，自己寫的一個rem.js，發(fā)現(xiàn)很好用，能適用所有移動端h5頁面的自適應(yīng)需求：

代碼一：


window.onload = function(){
    /*720代表設(shè)計(jì)師給的設(shè)計(jì)稿的寬度，你的設(shè)計(jì)稿是多少，就寫多少;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";
}

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

代碼二： 小米官網(wǎng)的寫法


!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);

看這兩個函數(shù)，把這些代碼放到j(luò)s里面，規(guī)則就是，調(diào)用函數(shù)，放兩個參數(shù)，第一個參數(shù)，是設(shè)計(jì)稿的寬度，第二個參數(shù)是px與rem的轉(zhuǎn)換比例，通常會寫100（因?yàn)楹盟悖划?dāng)然了，要把這段js代碼最好封裝在一個多帶帶的js文件里，并且放在所有的css文件引入之前加載。
實(shí)際應(yīng)用起來就是，#box1{ height:100px;}而調(diào)用了rem就是#box1{ height:1rem;}以此類推。 100px = 1rem . 1px = 0.01rem。在頁面中，凡是跟尺寸有關(guān)的padding、margin、width、height等等，都可以用rem來寫單位，這樣當(dāng)不同分辨率的手機(jī)在看同一個頁面時，效果幾乎是一樣的。

下面附圖，看效果：

代碼：




    
    Document
    
    
    
    


    

        
首頁

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82059.html

相關(guān)文章

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

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

    番茄西紅柿 評論0 收藏0

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

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

    huangjinnan 評論0 收藏0

  • Web網(wǎng)頁布局的主要方式

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

    blastz 評論0 收藏0

  • Web網(wǎng)頁布局的主要方式

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

    shiina 評論0 收藏0

發(fā)表評論

0條評論

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