关于vue利用postcss-pxtorem进行移动端适配的问题

 更新时间:2019年11月20日 10:19:08   作者:临安彭于晏  
这篇文章主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功,后来经过自己不断尝试之后终于成功了。稍微坐下总结:

1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置,而不要用webpack-simple,因为webpack里面很多插件加载器之类的都是给你预配好的,这样在项目构建中就不会遗漏什么。

2.cnpm install postcss-pxtorem -D安装postcss-pxtorem,此插件如果你用的是webpack的话只要进行安装即可,不需要另外进行配置,此插件是对px进行转换。

3.新建一个rem.js的文件,输入以下代码即可,然后在main.js中引用。

在这里插入图片描述

4.在项目的根目录下找到.postcssrc.js文件在文件内添加以下代码,一般750px的设计稿的根元素大小设置32.

在这里插入图片描述

5.重启项目就ok了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 基于vue项目设置resolves.alias: ''@''路径并适配webstorm

    基于vue项目设置resolves.alias: ''@''路径并适配webstorm

    这篇文章主要介绍了基于vue项目设置resolves.alias: '@'路径并适配webstorm,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • Nginx配置Vue项目,无法按路径跳转及刷新404的解决方案

    Nginx配置Vue项目,无法按路径跳转及刷新404的解决方案

    这篇文章主要介绍了Nginx配置Vue项目,无法按路径跳转及刷新404的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue3 实现一个自定义toast 小弹窗功能

    Vue3 实现一个自定义toast 小弹窗功能

    这篇文章主要介绍了Vue3 实现一个自定义toast 小弹窗,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • 在Vue3中实现子组件向父组件传递数据的代码示例

    在Vue3中实现子组件向父组件传递数据的代码示例

    Vue3作为目前最热门的前端框架之一,以其轻量化、易用性及性能优势吸引了大量开发者,在开发过程中,不可避免地需要在组件之间传递数据,本文将详细讲解在Vue3中如何实现子组件向父组件传递数据,并通过具体示例代码使概念更加清晰
    2024-07-07
  • element-ui修改el-form-item样式的详细示例

    element-ui修改el-form-item样式的详细示例

    在使用element-ui组件库的时候经常需要修改原有样式,下面这篇文章主要给大家介绍了关于element-ui修改el-form-item样式的详细示例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • vue打包上传到服务器加载慢的优化方式

    vue打包上传到服务器加载慢的优化方式

    这篇文章主要介绍了vue打包上传到服务器加载慢的优化方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue3中Hooks函数的使用及封装思想详解

    Vue3中Hooks函数的使用及封装思想详解

    Vue 3中的Hooks函数是一种用于在组件中共享可复用逻辑的方式,简单来说,就是将单独功能的js代码抽离出来, 加工成公共函数,从而达到逻辑复用,下面小编就来和大家聊聊Hooks函数的使用及封装思想吧
    2023-06-06
  • vue利用openlayers加载天地图和高德地图

    vue利用openlayers加载天地图和高德地图

    这篇文章主要介绍了 vue利用openlayers加载天地图和高德地图,下文章主要由两部分完成openlayers加载天地图和加载高德地图,下面来看看详细内容吧,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • 浅谈实现vue2.0响应式的基本思路

    浅谈实现vue2.0响应式的基本思路

    这篇文章主要介绍了浅谈实现vue2.0响应式的基本思路,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue返回上一页(后退)的几种方法与区别说明

    vue返回上一页(后退)的几种方法与区别说明

    这篇文章主要介绍了vue返回上一页(后退)的几种方法与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论