栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

rem自适应解决方案·px2rem-loader&hotcss

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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标签中添加了

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

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号