設(shè)計(jì)師一般只提供一套尺寸的設(shè)計(jì)稿，如何實(shí)現(xiàn)一套代碼實(shí)現(xiàn)多端自適應(yīng)？
一般設(shè)計(jì)師出的設(shè)計(jì)稿都是2倍圖
效果演示
假設(shè)一份寬度為640px(iphone5)的設(shè)計(jì)稿，一個(gè)元素寬度為:320px，通過px2rem-loader&hotcss.js實(shí)現(xiàn)代碼只有width: 320px，就實(shí)現(xiàn)在任何尺寸的屏幕下都占屏幕的1/2。
width: 320px;
height: 320px;
image.png
上圖可以看出，通過px2rem-loader自動(dòng)將320px轉(zhuǎn)化為8rem。
width: 8rem;
而hotcss.js則在html標(biāo)簽中添加了
<html lang="en" data-dpr="2" max-width="540" style="font-size: 40px;">
在head標(biāo)簽中添加了
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
當(dāng)尺寸換為iphone6時(shí)，可以看到寬度依然為8rem，而實(shí)際尺寸則變?yōu)?75px。
image.png
<html lang="en" data-dpr="2" max-width="540" style="font-size: 46.875px;">
font-size=46.875 使用了hotcss自適應(yīng)方案會(huì)根據(jù)設(shè)備的尺寸來動(dòng)態(tài)的改變根元素的font-size的大小來適合不同尺寸的設(shè)備
配置
安裝px2rem-loader
npm i px2rem-loader
在style-loader、css-loader后使用px2rem-loader。
{
loader: 'px2rem-loader',
options: {
remUnit: 40,
remPrecision: 8
}
}
通過script標(biāo)簽或import等方式引入hotcss.js，盡量靠前引入。
總結(jié)
通過這樣的方式，只需要一套代碼，就可以實(shí)現(xiàn)多終端自適應(yīng)，而css數(shù)值可以與設(shè)計(jì)稿保持一致。
