rem自適應解決方案·px2rem-loader&hotcss

codexu發表於2019-03-04
REMCSS

設計師一般只提供一套尺寸的設計稿，如何實現一套程式碼實現多端自適應？

效果演示

假設一份寬度為640px(iphone5)的設計稿，一個元素寬度為:320px，通過px2rem-loader&hotcss.js實現程式碼只有width: 320px，就實現在任何尺寸的螢幕下都佔螢幕的1/2。

width: 320px;
height: 320px;
複製程式碼

image

上圖可以看出，通過px2rem-loader自動將320px轉化為8rem。

width: 8rem;
複製程式碼

而hotcss.js則在html標籤中新增了

<html lang="en" data-dpr="2" max-width="540" style="font-size: 40px;">
複製程式碼

在head標籤中新增了

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
複製程式碼

當尺寸換為iphone6時，可以看到寬度依然為8rem，而實際尺寸則變為375px。

image

配置

安裝px2rem-loader

npm i px2rem-loader

在style-loader、css-loader後使用px2rem-loader。

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 40,
        remPrecision: 8
    }
}
複製程式碼

通過script標籤或import等方式引入hotcss.js，儘量靠前引入。

總結

通過這樣的方式，只需要一套程式碼，就可以實現多終端自適應，而css數值可以與設計稿保持一致。

相關文章