標籤:head css 起不來 .com 高度 http 固定 旋轉螢幕 使用者體驗
對於一個前端的初學者來說,首先要做好的事就是切頁面了,切頁面不得不說的就是布局了,布局的重要性不言而喻,為了良好的使用者體驗,提出了許多不一樣的布局:響應式布局,彈性布局,流動布局等等,也流入出了許多的架構。最近在看關於移動端的響應式布局,其中涉及到比較多的就是大小屬性的設定: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。看下面的代碼:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <!--<script type="text/javascript" src="js/rem.js" ></script>--> <title></title> <style> html{ font-size:20px; } *{ border: 0; padding: 0; margin: 0; } #box1{ width: 18.75rem; height: 7.5rem; float: left; background-color: red; } #box2{ width: 18.75rem; height: 7.5rem; float: left; background-color: #00FFFF; font-size: 0.6rem; } #box3{ width: 18.75rem; height: 17rem; float: left; background-color: #B22222; } #box4{ width: 18.75rem; height: 20rem; float: left; background-color: #BFBFBF; } #box5{ width: 18.75rem; height: 22rem; float: left; background-color: cadetblue; } #input1{ width: 80%; height: 2rem; float: left; border-radius: 2rem; margin-left: 1.5rem; margin-top: 0.6rem; } </style> </head> <body> <div id="box1"> <input type="text" id="input1" /> </div> <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div> <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div> <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div> <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div> </body></html>
上面的代碼在375*667的解析度下剛好能夠佔滿寬度,當你切換到其他的解析度(如414*736)時問題就來了,看圖:
這個問題的原因很簡單,這種寫法即使用的是rem也起不來作用,寬度和高度都是固定的,width為18.75rem就是375px,切換成其它解析度(如414*736),它的寬度還是375px,空白處還是顯示出來了,很多人會認為可以把寬度設定成百分比的形式,或者用媒介查詢@media,或是viewport設定中的那個deviceWidth()的方式來解決問題,當然這些方式均能解決寬度的問題,然而高度的問題又該怎麼辦呢?看下面:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> <!--<script type="text/javascript" src="js/rem.js" ></script>--> <title></title> <style> html{ font-size:20px; } *{ border: 0; padding: 0; margin: 0; } #box1{ width: 100%; height: 7.5rem; float: left; background-color: red; } #box2{ width: 100%; height: 7.5rem; float: left; background-color: #00FFFF; font-size: 0.6rem; } #box3{ width: 100%; height: 17rem; float: left; background-color: #B22222; } #box4{ width: 100%; height: 20rem; float: left; background-color: #BFBFBF; } #box5{ width: 100%; height: 22rem; float: left; background-color: cadetblue; } #input1{ width: 80%; height: 2rem; float: left; border-radius: 2rem; margin-left: 1.5rem; margin-top: 0.6rem; } </style> </head> <body> <div id="box1"> <input type="text" id="input1" /> </div> <div id="box2">手手手手手手手手手手手手手手手手手手手手手手手</div> <div id="box3">段段段段段段段段段段段段段段段段段段段段段段段</div> <div id="box4">方方方方方方方方方方方方方方方方方方方方方方方方</div> <div id="box5">哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</div> </body></html>
看效果:
看圖就知道了,寬度可以適應不同的行動裝置,然而高度一直都沒有發生變化,一直都是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時的高度是不一樣的,寫頁面時會更加的美觀。看效果:
看上面顯示的效果就可以看出來,和計算出的結果是一樣的,方法正確。以後可以用了。看看整體效果:
頁面元素完全沒有被展開的效果,按照一定的比例縮放,保持頁面效果美觀。
移動端rem布局的學習(基於一個網易雲播放頁面的思考)