資訊專欄INFORMATION COLUMN
摘要：最近在看關于移動端的響應式布局，其中涉及到比較多的就是大小屬性的設置等等，今天自己就捋一捋的用法。然而萬一不能用該怎么辦啊，所以還是要學會自己寫原生的頁面布局，也就會有今天的這篇文章了。的使用是指相對于根元素的字體大小的單位。
對于一個前端的初學者來說，首先要做好的事就是切頁面了，切頁面不得不說的就是布局了，布局的重要性不言而喻，為了良好的用戶體驗，提出了許多不一樣的布局：響應式布局，彈性布局，流動布局等等，也流入出了許多的框架。最近在看關于移動端的響應式布局，其中涉及到比較多的就是大小屬性的設置：px、vw、vh、%、em、rem等等，今天自己就捋一捋rem的用法。
說在前面一想到寫移動端的頁面，就要考慮自己寫的頁面能夠適應各種不同的移動設備，起初想想要做到感覺好難啊，最初想到的就是用第三方的框架，用別人寫的東西應該會很方便。然而萬一不能用該怎么辦啊，所以還是要學會自己寫原生的頁面布局，也就會有今天的這篇文章了。先看看自己用普通百分比、像素來寫的頁面和后來改用rem寫的頁面的對比：
普通百分百布局與rem布局的比較小分辨率（375*667）
小分辨率（414*736）
上面是兩種小的分辨率，最后得到的效果不會很差，感覺差不多，現在還成大一點的分辨率，效果就不一樣了：
大分辨率
簡單的對比下就看出了效果。當不用別人的框架，該怎么去寫。最容易想到的就是用百分比來寫，這種寫法對設備的寬度有用，寬度是固定的，對高度不起什么作用，大部分人的做法就是寬度用百分來設置，高度用px來設置，但這種的做法體驗并不是很好，用分辨率小的設備感覺不是很差，一旦換成了分辨率比較大的設備效果就差很多了，大部分的標簽元素都會被拉伸。高度固定，換成了大的分辨率各種元素效果還是原來的，各種元素固定了大小，體驗并不是很好。
rem的使用rem是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位，通過根元素進行適配的。
普通使用
大部分是通過設置html的字體大小就可以控制rem的大小，例如：html的字體大小為20px，那么就說20px為1rem，接下來的所有元素的大小都基于這個比例來換算。這種的算法是存在問題的，當我們計算頁面的寬度rem值得時候都是使用某一款移動設備的分辨率來計算的，下面的例子我用的是iphone6的分辨率375*667，它的寬度為375px，20px為1rem，那么375px就是18.75rem。看下面的代碼：
上面的代碼在375667的分辨率下剛好能夠占滿寬度，當你切換到其他的分辨率（如414736）時問題就來了，看圖：
這個問題的原因很簡單，這種寫法即使用的是rem也起不來作用，寬度和高度都是固定的，width為18.75rem就是375px，切換成其它分辨率（如414*736），它的寬度還是375px，空白處還是顯示出來了，很多人會認為可以把寬度設置成百分比的形式，或者用媒介查詢@media,或是viewport設置中的那個deviceWidth（）的方式來解決問題，當然這些方式均能解決寬度的問題，然而高度的問題又該怎么辦呢？看下面：
看效果：
看圖就知道了，寬度可以適應不同的移動設備，然而高度一直都沒有發生變化，一直都是150px，頁面效果并不好看，分辨率大了，頁面被拉伸，高度顯得變小了。
正確使用
動態計算html的font-size，核心是切換不同移動設備通過js獲取設備寬度，然后按比例計算html的font-size的值，動態變化。
var d = document.documentElement;//獲取html元素 var cw = d.clientWidth || 750; d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + "px" : (20 * (cw / 375)) + "px";
上述代碼解釋：
設計稿橫向分辨率為375（iphone6），計劃20px為1rem；
布局的時候，各元素的css尺寸= 20 * （設備寬度/設計稿豎向分辨率）。
完整代碼：
window.addEventListener(("orientationchange" in window ? "orientationchange" : "resize"), (function() {//判斷是屏幕旋轉還是resize
function c() {
var d = document.documentElement;//獲取html元素
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + "px" : (20 * (cw / 375)) + "px";
}
c();
return c;
})(), false);
上面的做法就可以動態的設置各種標簽元素的寬和高，按比例的調試適應不同的移動設備。例如下：
上面的代碼中是以iphone6為設計稿的，box1的height為7.5rem(150px)，如果切換成iphone6 plus的大小，box1的height=(414/375)7.5=8.28rem,也就是8.2820=165.6px，與iphone6時的高度是不一樣的，寫頁面時會更加的美觀。看效果：
看上面顯示的效果就可以看出來，和計算出的結果是一樣的，方法正確。以后可以用了。看看整體效果：
頁面元素完全沒有被拉伸的效果，按照一定的比例縮放，保持頁面效果美觀。
源碼
寫在最后
終于寫完了這篇文章，感覺寫文章的過程就是再學習的過程，可以多做做；
最近在學習寫寫網易云的播放頁面，一做頁面就要考慮布局的事情，就思考了這方面的問題，記錄下來。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112718.html
摘要：最近在看關于移動端的響應式布局，其中涉及到比較多的就是大小屬性的設置等等，今天自己就捋一捋的用法。然而萬一不能用該怎么辦啊，所以還是要學會自己寫原生的頁面布局，也就會有今天的這篇文章了。的使用是指相對于根元素的字體大小的單位。 對于一個前端的初學者來說，首先要做好的事就是切頁面了，切頁面不得不說的就是布局了，布局的重要性不言而喻，為了良好的用戶體驗，提出了許多不一樣的布局：響應式布局，...
摘要：關于路由，剛開始設計路由的時候想了很多，由于一開始的目標就是網易云音樂的所有內容，所以設計了三級路由，，大概這樣，點擊查看。 標題略夸張了，但是這個從ui還原上已經很接近官方版本了。雖然目前這個是很多人造過的輪子，但是可能每個人的實現方式都不一樣，自己寫一遍也會有許多收獲。 項目地址 預覽地址 api：ap使用的是一個開源的nodejs封裝的網易云音樂api，地址 技術棧 vue...
閱讀 3935·2021-11-16 11:50
閱讀 934·2021-11-11 16:55
閱讀 3662·2021-10-26 09:51
閱讀 866·2021-09-22 15:03
閱讀 3421·2019-08-30 15:54
閱讀 3265·2019-08-30 15:54
閱讀 2476·2019-08-30 14:04
閱讀 922·2019-08-30 13:53
