美文网首页前端常用技术汇总vuevue技术栈
vue移动端适配终极解决方案hotcss

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

作者: 小悟空大仙人 | 来源:发表于2019-01-31 00:33 被阅读389次

先上个链接

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

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

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

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

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

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

ok!

相关文章

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

    先上个链接 https://github.com/imochen/hotcss/tree/master/src 重...

  • 2018-03-04

    hotcss不是一个库,也不是一个框架,它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易...

  • 如何在Vue项目中使用vw实现移动端适配

    Vue项目中使用vw实现移动端适配 我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终...

  • 移动端如何适配?

    1、使用Flexible实现手淘H5页面的终端适配2、再聊移动端页面的适配3、如何在Vue项目中使用vw实现移动端...

  • vue移动端适配

    网址:https://segmentfault.com/a/11900000160398481.复制粘贴里面的JS...

  • Vue移动端适配

    一、配置flexible1、安装lib-flexible 2、全局引用文件(在mian.js中引入) 3、在项目根...

  • vue移动端适配

    首先安装插件 在main.js中进行引入 然后安装px转换为rem的插件 找到build文件夹下的utils.js...

  • vue 移动端适配

    vue适配:以750设计稿为基准,在不同屏幕尺寸下如何适配 Safari中设置了禁止用户缩放无效的问题: iOS ...

  • vue移动端适配

    在根目录的utils文件夹中新建rem.js,如果没有utils则自己新建,一般utils文件夹都是存放公用方法的...

  • vue 移动端适配

    这里我写一下我自己用的vue 移动端适配 ,可能跟别人的不一样。但是效果是一样的。我是安装 amfe-flexib...

网友评论

    本文标题:vue移动端适配终极解决方案hotcss

    本文链接:https://www.haomeiwen.com/subject/libhsqtx.html