设计师一般只提供一套尺寸的设计稿,如何实现一套代码实现多端自适应?
效果演示
假设一份宽度为640px(iphone5)的设计稿,一个元素宽度为:320px,通过px2rem-loader&hotcss.js实现代码只有width: 320px,就实现在任何尺寸的屏幕下都占屏幕的1/2。
width: 320px;
height: 320px;
上图可以看出,通过px2rem-loader自动将320px转化为8rem。
width: 8rem;
而hotcss.js则在html标签中添加了
在head标签中添加了
当尺寸换为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数值可以与设计稿保持一致。