用Rem來無腦還原Web移動端自適應的頁面

PascalXie 發(fā)布于2019-08-19 18:00 / 1878人閱讀

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

用Rem來無腦還原Web移動端自適應的頁面:

代碼：

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

tips：

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

云服務器 GPU云服務器移動端自適應來無腦 rem寬度自適應自動適應頁面

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

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

vw+rem移動端自適應布局

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

Little_XM 2019-08-30 11:09 評論0 收藏0
移動端自適應布局方案

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

zacklee 2019-08-26 11:50 評論0 收藏0
移動端自適應方案

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

Yi_Zhi_Yu 2019-08-20 15:15 評論0 收藏0