设计师一般只提供一套尺寸的设计稿，如何实现一套代码实现多端自适应？

效果演示

假设一份宽度为640px(iphone5)的设计稿，一个元素宽度为:320px，通过&实现代码只有width: 320px，就实现在任何尺寸的屏幕下都占屏幕的1/2。

width: 320px;height: 320px;

上图可以看出，通过自动将320px转化为8rem。

width: 8rem;

而则在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等方式引入，尽量靠前引入。

总结

通过这样的方式，只需要一套代码，就可以实现多终端自适应，而css数值可以与设计稿保持一致。