rem自適應解決方案·px2rem-loader&hotcss
效果演示设计师一般只提供一套尺寸的设计稿，如何实现一套代码实现多端自适应？
假设一份宽度为640px(iphone5)的设计稿，一个元素宽度为:320px，通过px2rem-loader&hotcss.js实现代码只有width: 320px，就实现在任何尺寸的屏幕下都占屏幕的1/2。
width: 320px;
height: 320px;
上图可以看出，通过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。
安装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数值可以与设计稿保持一致。
點擊查看更多內容
1人點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦