主角是誰 在今天這篇文章中，我並不會在這裡講一些移動端視口的概念，包括物理像素和邏輯像素，理想視口，dpr等等等等，我只介紹這樣一種非常不錯的移動端適配方案：post-css-to-viewport，如果我說這種方案能解決98%以上的移動端佈局痛點，我想整個博客園，應該沒有人會反駁。 痛點在哪裡 在 ...
主角是誰
- 在今天這篇文章中，我並不會在這裡講一些移動端視口的概念，包括物理像素和邏輯像素，理想視口，dpr等等等等，我只介紹這樣一種非常不錯的移動端適配方案：
post-css-to-viewport，如果我說這種方案能解決98%以上的移動端佈局痛點，我想整個博客園，應該沒有人會反駁。
痛點在哪裡
在之前有一種流行已久的移動端適配方案，那就是rem，我想下麵這兩句代碼，有不少老移動端都不會陌生：
const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.querySelector('html').style.fontSize = deviceWidth / 7.5 + 'px';
- 沒錯，在那個移動端UI稿尺寸為
750*1334滿天飛的時代，這兩句代碼確實給開發者帶來了很大的方便，這樣設置根font-size後，px和rem的轉換比例成了100, 為比如UI稿一個長寬分別為120px*40px，那麼開發者對應的寫成1.2rem*0.4rem就可以了 - 這種換算已經是頗為方便，但是並非所有的項目都能這樣去設置一個方便換算的比例繫數，當比例繫數為100時，小數點往前面挪兩位就行了，然而有的項目設置的換算繫數千奇百怪，有50的，有16的，很多已經嚴重超出口算力所能及的範疇了。所以後來誕生的
px-to-rem或者px2rem就是為瞭解決這個問題 - 當然，這仍沒有給css帶來多少簡潔的清流，因為人們有時候不需要去轉換一些單位，比如字體大小
font-size，有不少人希望給字體設置一個固定的px，它不會隨著設備的不同而轉換成rem，因為這樣在一些平板設備上顯得太大了
人們希望有這樣一種方案...
- 首先，無論換算方不方便，我都不想換算（就是這麼懶
