關於rem

關於手機端字體設置的rem怎麼定義

css格式化文件reset.css中加入： @media screen and (max-width: 750px){ html{font-size:30px;} } @media screen and (min-width:640px) and (max-width:749px){ html{font-size:25px; } } @media screen and (min-width:480px) and (max-width:639px){ html{font-size:20px; } } @media screen and (min-width:320px) and (max-width:479px){ html{font-size:15px; } } 根據不一樣尺寸的屏幕，去定義html級的單位字體大小，在PSD轉換製做頁面的時候，基本的手機端PSD的尺寸爲750*1335，對照下來的尺寸也就是1rem=30px，在製做時掌握好計算尺寸就基本能解決這些問題了。 手機端的高度能夠固定，寬度能用百分比來表示，就不要用rem去固定，必要的固定寬度的，就用rem固定，像一些按鈕，基本都是用百分比去表示寬度的，像一些固定寬度的圖標就用rem去固定。

在頁面中優先寫出媒體查詢的標籤 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

舉例下面三款老年機
設備名稱 分辨率 估算字體大小 rem與px轉換
iphone5 320568 font-size：12px； 1rem=12px
iphone6 375667 font-size：14px； 1rem=14px
iphone6 Plus 414*736 font-size：16px； 1rem=16px

html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始樣式必須寫在最頂部！！！！若是寫在媒體查詢底部的話就會覆蓋上方的媒體查詢（由於是層疊樣式表嘛~）
@media screen and (max-width:320px ) { html{font-size: 12px;} }
@media screen and (min-width:321px) and (max-width:750px ) { html{font-size: 14px;} }
@media screen and (min-width:751px ) { html{font-size: 16px;}

unction rem() { var w = Math.min(document.documentElement.getBoundingClientRect().width, 500); document.getElementsByTagName('html')[0].style.fontSize = w * 100 / 320 + 'px'; } rem(); window.onresize = function() { rem(); };

 

 

 

 

 

至於爲何js中要用w＊100 / 320呢 這個320 是由於咱們美工給個人圖都是按照5s的標準來作的，就是320px，固然圖都是640px的，因此我就除以的320，若是美工給你的圖是375*2的 那麼你就須要把320換成375，由於這樣你在圖裏量出的div的寬度才能符合。

 

不少高度問題由於比例的換算，到最後整個頁面變形。後期問題太多，果斷換了media調整整個項目尺寸。

使用rem應注意什麼？

　1）作出來的效果與效果圖有些許誤差。

爲何會出現這個緣由呢？這是由於瀏覽器對小數數值的處理各不相同致使。不一樣瀏覽器計算rem轉換爲px數值時，對於小數點後的數值的處理是有所誤差，rem計算誤差的根源是瀏覽器內核數字類型的區別，若是瀏覽器的內核數字類型是float類型，可以較好地支持有小數點的數值。當瀏覽器內核數字類型是int類型，不支持小數點，會對數字進行四捨五入，這樣就會有誤差。若是元素越大誤差得就越明顯！這個坑幾乎沒法避免，只能讓他更好的適應最多的瀏覽器。好比chroem內核。

 

2）雪碧圖定位問題

rem的換算成px的尺寸非嚴格精確，若是雪碧圖圖標之間的距離太小，就可能致使圖標過界，所以圖與圖之間的間隙須要留相應大一點。

 

3）rem單位最好不用在PC端

由於pc端有的瀏覽器不識別12如下的字體

性能、GUP加速、技術選型等）才能作出用戶體驗超好的web頁面，還有，rem也並非萬能的，也有一些場景是不適於使用rem的，好比 當用做圖片或者一些不能縮放的展現時，必需要使用固定的px值，由於縮放可能會致使圖片壓縮變形等。

-------------------整理於yingxiang 20190218