微信搜索superit|邀请体验:大数据, 数据管理、OLAP分析与可视化平台 | 赞助作者:赞助作者

rem自适应解决方案·px2rem-loader与hotcss配合使用

前端 aide_941 26℃

rem自适应解决方案·px2rem-loader与hotcss配合使用

96

神秘者007 

2018.06.27 21:14 字数 270 阅读 768评论 0

设计师一般只提供一套尺寸的设计稿,如何实现一套代码实现多端自适应?
一般设计师出的设计稿都是2倍图

效果演示

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

width: 320px;
height: 320px;

image.png

上图可以看出,通过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。

image.png
<html lang="en" data-dpr="2" max-width="540" style="font-size: 46.875px;">
font-size=46.875      使用了hotcss自适应方案会根据设备的尺寸来动态的改变根元素的font-size的大小来适合不同尺寸的设备

配置

安装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数值可以与设计稿保持一致。

转载请注明:SuperIT » rem自适应解决方案·px2rem-loader与hotcss配合使用

喜欢 (0)or分享 (0)