方法一：
function方法二：rem()
docel.style.fontsize = osize + 'px';
}window.addeventlistener('resize', rem, false
);rem();
~function1.尺寸相關概念() computed();
window.addeventlistener(evt,computed);
}();
裝置畫素 pt（物理畫素）解析度 ，絕對畫素 pt：畫素點
css畫素 px（裝置獨立畫素、邏輯畫素），
注意：在pc中預設1px = 1pt ， 在w3c標準中 ，px是乙個視角單位
2.螢幕尺寸
英吋（inc）：長度單位
1inc = 2.54cm
3.畫素密度（ppi）
ppi = 斜邊長/螢幕尺寸
斜邊長 = math.sqrt(math.pow(縱向解析度,2)+math.pow(橫向解析度,2))
例如 iphone6 plus
計算可得出
斜邊長= math.sqrt(math.pow(1080,2)+math.pow(1920,2))
畫素密度 = 斜邊長/5.5 = 401ppi
相對於相同尺寸下螢幕 ， ppi越多則畫素越多 ，則發光的點越多，顯示則越清晰
於是就有了高清屏的概念
高清屏（視網膜屏）：相對於普通屏 ， 同面積下，ppi翻了一番
你會發現大小在高清屏中變成了正常螢幕下的四分之一，為了使在高清屏中也正常顯示大小則需要了解畫素比（dpr）的概率
4.畫素比（drr）
drp = 裝置畫素/css畫素
補充： window.devicepixelratio 可以訪問dpr
devicepixelratio在不同的瀏覽器中還存在些許的相容性問題
套用公式，以iphone6為例（沒有縮放的情況下）
iphone6 css畫素為375px 而裝置畫素為750pt
750/375 = 2 ;2dpr 說明乙個css畫素佔兩個裝置畫素
以下圖為例
當正常大小放在高清屏上顯示 ， 則只有整個螢幕的四分之一
如果需要正常顯示大小 ， 則需要將css畫素放大兩倍
高清屏中的會變得模糊 ， 當乙個裝置畫素對應乙個css畫素時才會相對清晰
所以 ， 高清屏中的 ， 需要按照高清屏的比例去做
例如：一張 ，在正常屏中 ，400*400時，正常顯示不模糊，
在高清屏中 ， 則需要用到800*800的圖 ，才能正常顯示
普通屏中的放到高清屏顯示， 會變小
高清屏中的放到普通屏顯示，會變大
4.viewport
viewport特性，乙個移動專屬的meta值，用於定義視口的各種行為。
meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動裝置的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支援，事實也證明這個東西還是非常有用的。
在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱為乙個個屬性和值)，如下：
width
設定layout viewport的寬度，為乙個正整數，或字串"width-device"（裝置實際寬度）
initial-scale
設定頁面的初始縮放值，為乙個數字，可以帶小數
minimum-scale
允許使用者的最小縮放值，為乙個數字，可以帶小數
maximum-scale
允許使用者的最大縮放值，為乙個數字，可以帶小數
height
設定layout viewport的高度，這個屬性對我們並不重要，很少使用
user-scalable
是否允許使用者進行縮放，值為"no"或"yes", no 代表不允許，yes代表允許
這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。
使用 rem 做移動端適配
一 為什麼要使用rem 隨著手機的普及，以及手機可以方便攜帶的有優點，所以現在大多數時候，人們都會選擇用移動端檢視網頁。由於手機的螢幕大小不一，我們使用傳統的px單位已經無法滿足使用者檢視頁面的效果 舉個例子 我們有乙個200 x 200的盒子 如果使用px的話就會出現在不同裝置看到盒子的比例不是一...
vue開發移動端使用rem的適配方案
一 新增meta meta name viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0,viewport fit cover 另外移動端...
rem適配方案的使用
rem適配方案的使用 首先安裝amfe flexible和postcss pxtorem在終端執行如下 npm install amfe flexible snpm install postcss pxtorem d 然後在vue.config.js檔案的module.exports中新增如下 pr...