成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用Rem來無腦還原Web移動(dòng)端自適應(yīng)的頁面

PascalXie / 1886人閱讀

摘要：用來無腦還原移動(dòng)端自適應(yīng)的頁面代碼解讀首先，不去鳥不支持事件監(jiān)聽的瀏覽器，當(dāng)然不寫也可以，因?yàn)閷?duì)字號(hào)的自適應(yīng)的需求都是移動(dòng)端。函數(shù)用來獲取屏幕分辨率，然后按比例來設(shè)置的字號(hào)。

用Rem來無腦還原Web移動(dòng)端自適應(yīng)的頁面:

代碼：
(function (win,doc){
    if (!win.addEventListener) return;
    var html=document.documentElement;
    function setFont()
    {var cliWidth=html.clientWidth;
        html.style.fontSize=100*(cliWidth/640)+"px";    
    }   
    win.addEventListener("resize",setFont,false)
    doc.addEventListener("DOMContentLoaded",setFont,false)
})(window,document);
解讀：

??首先，不去鳥不支持事件監(jiān)聽的瀏覽器（IE6、7、8），當(dāng)然不寫也可以，因?yàn)閷?duì)字號(hào)的自適應(yīng)的需求都是移動(dòng)端。
??當(dāng)出現(xiàn)窗口大小改變的時(shí)候給window綁定一個(gè)監(jiān)聽，運(yùn)行一個(gè)叫setFont的函數(shù)；當(dāng)頁面的Dom結(jié)構(gòu)加載完也運(yùn)行setFont（或者不監(jiān)聽直接setFont()運(yùn)行也可以。）
??setFont函數(shù)用來獲取屏幕分辨率，然后按比例來設(shè)置html的字號(hào)。
??我這里是以100px為基礎(chǔ)來縮放。為什么是100px？待我細(xì)細(xì)說明：
我們一般拿到手的設(shè)計(jì)稿都是640px的，我們不以手機(jī)分辨率為考量，如果單純1：1還原640px的頁面，那么我們的頁面根目錄的字號(hào)就是100px（100*（640/640）=100px），那么那么設(shè)計(jì)稿上選擇一個(gè)文案，然后PS告訴我們字號(hào)是24px，那么我們就在頁面里給這段文案設(shè)置成0.24rem,那么640px的頁面上字體就是24px啦。
??然后當(dāng)我們考慮比如頁面是5/5s上看，那么當(dāng)前頁面字號(hào)就是50px（100*(320/640)=50px），那么0.24rem會(huì)以12px的大小展示出來。而640px寬的設(shè)計(jì)稿上的24px的字體，在320px的頁面下，就是以12px顯示的~
??這就是為什么要以100px為基礎(chǔ)字號(hào)，這樣頁面里量的是24px的字體，我代碼里寫0.24rem就會(huì)自動(dòng)在頁面里以12px顯示了~而且它可以在6/6p上以13或者14px的樣式展示出來~
??那你說，我遇到了奇葩的750px為分辨率的設(shè)計(jì)稿（比如是iphone6的），那你就把公式改成 100*(cliWidth/750)+px就行（也就是設(shè)計(jì)稿是多寬，公式里就寫多少）。然后設(shè)計(jì)稿里量的Xpx大小，就寫多少0.Xrem~什么分辨率的設(shè)計(jì)稿都不怕啦

tips：

??100px只是為了讓我偷懶不用去換算字體大小的，如果喜歡可以自己訂1000px，然后寫0.012rem這樣。但是不要寫像10px這樣的基礎(chǔ)字號(hào)，因?yàn)橛行g覽器有最小字號(hào)的限制，比如設(shè)置了頁面基礎(chǔ)字號(hào)是10px，但是實(shí)際上最小只認(rèn)11px，那么2rem的字體，本身是希望以20px顯示，可能最后是22px顯示的。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79066.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 評(píng)論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è)相對(duì)單位，布局是一個(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)端對(duì)響應(yīng)式布...

    zacklee 評(píng)論0 收藏0

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

    摘要：如何解決移動(dòng)端的自適應(yīng)問題主要是移動(dòng)端的屏幕尺寸比較多，如何在各種屏幕寬度下顯示的更好，更一致問題。用解決自適應(yīng)的問題，是個(gè)非常精確的解決方案，能夠?qū)⒏叨群蛯挾榷甲龅诫S著屏幕的寬度完全的等比縮放，但是缺點(diǎn)就是開發(fā)起來效率低點(diǎn)。 1.背景知識(shí) 首先是看幾篇文章，了解viewport scale dpr 圖片的顯示精度問題 一像素顯示問題， 縮放導(dǎo)致的像素適應(yīng)問題 移動(dòng)端的自適應(yīng)問題...

    Yi_Zhi_Yu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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