rem是什么

rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說它就是一個(gè)相對(duì)單位。看到rem大家一定會(huì)想起em單位，em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。

動(dòng)態(tài) REM 方案

1.瀏覽器禁止 980 像素的縮放（meta:vp 阻止縮放）
2.設(shè)置 html {font-size: 頁面寬度 / 10 px}
3.10 rem == 頁面寬度
4.所有單位都用 rem == 所有長(zhǎng)度都以頁面寬度為基準(zhǔn)
5.頁面可以兼容任何手機(jī)屏幕

1px 問題

1.在普通屏幕

CSS 1px == 設(shè)備的 1px

2.在 Retina 設(shè)備

CSS 1px == 設(shè)備的 2px
border-width == 設(shè)備的 1px
border-width: 0.5px == 設(shè)備的 1px （兼容性有問題）

解決方法

頁面整體縮放 50% <meta initial-scale=0.5> border-width: 1px == 設(shè)備的 1px

副作用所有的 div 都變?yōu)樵瓉淼?50%

所有長(zhǎng)度都以 rem 為基準(zhǔn)，讓 rem 變?yōu)樵瓉淼?2倍

1.獲取設(shè)備像素比（1/2/3）

window.devicePixelRatio是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例。

2.initial scale = 1/像素比

3.讓 rem 變?yōu)?rem * 像素比

4.border-top: 1px solid red;