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

時間 2019-11-06

標籤 rem 自適應解決方案 px2rem loader&hotcss loader hotcss 欄目 CSS 简体版

原文原文鏈接

做者：codexujavascript

設計師通常只提供一套尺寸的設計稿，如何實現一套代碼實現多端自適應？css

效果演示

假設一份寬度爲640px(iphone5)的設計稿，一個元素寬度爲:320px，經過px2rem-loader&hotcss.js實現代碼只有width: 320px，就實如今任何尺寸的屏幕下都佔屏幕的1/2。html

width: 320px;
height: 320px;
複製代碼

上圖能夠看出，經過px2rem-loader自動將320px轉化爲8rem。java

width: 8rem;
複製代碼

而hotcss.js則在html標籤中添加了git

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

在head標籤中添加了github

<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。npm

安裝px2rem-loaderiphone

npm i px2rem-loaderspa

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

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

經過script標籤或import等方式引入hotcss.js，儘可能靠前引入。

經過這樣的方式，只須要一套代碼，就能夠實現多終端自適應，而css數值能夠與設計稿保持一致。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。