【參考】rem的一些淺使用

鏈接：https://www.jianshu.com/p/f4e1c4454fee
https://www.jb51.net/article/120206.htm
今天接觸到一個PC端的頁面，給的設計稿是1920的，並且要求適應屏幕寬度，
所以查了下rem。發現用起來很方便。

rem

rem是指相對於根元素字體大小的單位，一個相對單位。rem可以做到隨着根元素的字體大小隨之變化，達到自適應屏幕的效果

pc用法

在head中加入meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

代表寬度是設備寬度，同時不允許縮放。
然後給html根元素設置 font-size爲100px,這樣會方便後面的換算
然後再在JS中加入

var deviceWidth
setHtmlFontSize()

if (window.addEventListener) {
  window.addEventListener('resize', function () {
      setHtmlFontSize()
  }, false)
}
function setHtmlFontSize () {
  // 1920是設計稿的寬度，當大於1920時採用1920寬度，比例也是除以19.20
    deviceWidth = document.documentElement.clientWidth > 1920 ? 1920 : document.documentElement.clientWidth
    document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.20 + 'px !important'
}

還有一個方便px轉rem的插件
因爲我用的是vscode編輯器，可以在裏面添加一個px to rem，然後ALT+Z就能把選中的PX自動換算爲rem，不過記得要更改他的默認設置，他默認設置是16px，把改爲100px就可以了。

移動端和pc端

1、內容在一屏內顯示的，採用了(內容框)上下左右居中的辦法，裏面的內容絕對於這個內容框定位.這樣一來，在不同大小屏中，內容總是在中間，看起來較正常

2、長，寬，LEFT，TOP，RIGHT，BOTTOM都採用了REM，並且HTML的FONT-SIZE設置的是100PX一是覺得計算方便，二是如果設爲10PX，谷歌會不兼容.此時BODY的FONT-SIZE設置爲正常值，12PX.不然的話，其它的DOM都會繼承HTML的100PX的FONT-SIZE，導致效果巨大。

3、當瀏覽器窗口變化時，內容的大小以及相對位置也會相應變化，這個依靠JS修改HTML的FONT-SIZE值實現.如下：

$(window).resize(function ()// 綁定到窗口的這個事件中
{
 var whdef = 100/1920;// 表示1920的設計圖,使用100PX的默認值
 var wH = window.innerHeight;// 當前窗口的高度
 var wW = window.innerWidth;// 當前窗口的寬度
 var rem = wW * whdef;// 以默認比例值乘以當前窗口寬度,得到該寬度下的相應FONT-SIZE值
 $('html').css('font-size', rem + "px");
});

如果調整窗口大小，會發現HTML的FONT-SIZE值在變化，同時，使用REM設置的DOM也在變化。REM正是參考HTML的FONT-SIZE值來計算的

4、如果是在手機上，平板電腦上，更要使用REM，由於手機上一般不會調整瀏覽器大小，所以可以在頁面載入時，設置一次即可

$(function(){
 
 var whdef = 50/750;// 表示750的設計圖,使用50PX的默認值
 var wH = window.innerHeight;// 手機窗口的高度
 var wW = window.innerWidth;// 手機窗口的寬度
 var rem = wW * whdef;// 以默認比例值乘以當前窗口寬度,得到該寬度下的相應FONT-SIZE值
 $('html').css('font-size', rem + "px");
 })