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

時間 2019-11-09

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

原文原文鏈接

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

效果演示

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

width: 320px;
height: 320px;

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

width: 8rem;

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

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

在head標籤中添加了java

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

安裝px2rem-loadergithub

npm i px2rem-loadernpm

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

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 40,
        remPrecision: 8
    }
}

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

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

相關標籤/搜索