寫于2019.11.12
這是所有前端都無法回避的問題真朗，上周項(xiàng)目原本是按設(shè)計(jì)圖1920的尺寸寫死的px，后來客戶因?yàn)殡娔X是1600的分辨率臼闻，打開之后的樣式出現(xiàn)了變形的情況有巧。
解決辦法：
1鹉胖、引入一段js進(jìn)行單位換算所宰；
2绒尊、將所有的px改成rem單位。
步驟：
一仔粥、在要進(jìn)行自適應(yīng)<script>中寫入下段代碼
<script>
(function() {
function setRootFontSize() {
let rem, rootWidth;
let rootHtml = document.documentElement;
//限制展現(xiàn)頁面的最小寬度
rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
// 19.2 = 設(shè)計(jì)圖尺寸寬 / 100（ 設(shè)計(jì)圖的rem = 100 ）
rem = rootWidth / 19.2;
// 動(dòng)態(tài)寫入樣式
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
})();
其中要修改的尺寸婴谱，根據(jù)你的原始設(shè)計(jì)稿來
image.png
二、將所有的px全部替換成rem躯泰，并處以100谭羔。例如：
image.png
