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

先上个链接

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


vue移动端适配终极解决方案hotcss_第1张图片

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


vue移动端适配终极解决方案hotcss_第2张图片

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


vue移动端适配终极解决方案hotcss_第3张图片

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

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


vue移动端适配终极解决方案hotcss_第4张图片

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


ok!

你可能感兴趣的:(vue移动端适配终极解决方案hotcss)