欢迎来到网际学院,让您的头脑满载而归!

vue移动端适配终极解决方案hotcss

发布日期:2020-01-20 08:37:34 作者:管理员 阅读:67

先上个链接https://github.com/imochen/hotcss/tree/master/src重要文件就是这些,我使用的是sass,下载下来,放到项目目录里,下面是我的(vue-cli3)目录,我在创建项目的时候选择了sass

先上个链接

https://github.com/imochen/hotcss/tree/master/src


vue移动端适配终极解决方案hotcss

重要文件就是这些,我使用的是sass,下载下来,放到项目目录里,下面是我的(vue-cli3)目录,我在创建项目的时候选择了sass 作为了css的预处理器 。


vue移动端适配终极解决方案hotcss

放进项目之后,要做的是引入hotcss.js 和 px2rem.scss ,先来看一下 px2rem.scss 的内容


vue移动端适配终极解决方案hotcss

就这些东西,需要注意的是,$designWidth 的值 是你ui设计稿的宽度,这里我的设计稿是750;

引入px2rem.scss 的方式 是通过vue.config.js 引入的,vue.config.js的配置这里不多说明,可以去官方文档中查看,以下的引入px2rem.scss 的 vue.config.js ,要注意路径问题。


vue移动端适配终极解决方案hotcss

引入hotcss.js直接在main.js 中引入就可以了,然后用法就是 width:100px 要写成 width:px2rem(100),不用带单位哦,因为在px2rem.scss 中就已经加上rem单位了。


vue移动端适配终极解决方案hotcss

ok!



作者:小悟空大仙人
链接:https://www.jianshu.com/p/1bfb0db87a61
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


Copyright oneie ©2014-2017 All Rights Reserved. 所有资料来源于互联网对相关版权责任概不负责。如发现侵犯了您的版权请与我们联系。 网际学院 版权所有 京ICP备14031243号-3
免责声明  商务合作及投稿请联系 QQ:86662817