为什么要使用PostCss

  转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不常用的配置。将成为vw优先单位使用,以rem作为回退模式。考虑到vw在移动设备的支持度不如rem,这款插件很好的解决了该问题。然后简单的介绍下。

安装指令

$ npm install @ moohng / postcss-px2vw --save-dev

使用方法

先创建一个.postcssrc.js文件,然后配置

module.exports = {
plugins: {
'@moohng/postcss-px2vw': {}
}
}

例子:
使用前:

.box {
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}

使用后:

.box{
border: 1px solid black;
margin-bottom: 1px;
font-size: 0.625rem;
font-size: 6.25vw;
line-height: 0.9375rem;
line-height: 9.375vw;
}

Vue使用PostCSS 插件和如何使用sass及常用语法的更多相关文章

  1. vue项目及插件

    vue项目的创建 方法1: cmd中执行 vue ui vue会创建一个socket,方便快捷 方法2: 命令行建立 vue create v-proj //创建项目名为v-proj的项目文件 > ...

  2. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  3. vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...

  4. 分享一个自己写的vue多语言插件smart-vue-i18n

    前言 目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压 ...

  5. Vue.js devtool插件安装后无法使用的解决办法

    初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示v ...

  6. Vue实战之插件 sweetalert 的使用

    安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { ...

  7. [vue]初探vue生态核心插件Vuex

    为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...

  8. Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入

    目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main. ...

  9. 基于vue的分页插件

    相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...

随机推荐

  1. kdump原理,是如何找到入口的

    请解释下kdump原理,捕获内核是如何获取到生产内核的首地址的.

  2. Redis系统学习

    准备写一些关于Redis学习的文章的,发现网上有N多资料有人已经做了总结.查看这些Redis资料,按次序浏览这些Redis资料,相信想学习Redis的同学会很快熟悉: 1.Redis学习手册(目录) ...

  3. 漫长的旅途--C++primer学习-命名空间以及类的自动转换和强制转换

    C++用名称空间来控制名称的作用域: 1不同命名空间的同名变量可以同时存在,不会发生冲突 2命名空间不能出现在代码块中 3我们用作用域运算符::,使用空间名来限定名称,最常用的std::cout 4u ...

  4. 为什么我们调用 start()方法时会执行 run()方法,为什么 我们不能直接调用 run()方法?

    当你调用 start()方法时你将创建新的线程,并且执行在 run()方法里的代码. 但是如果你直接调用 run()方法,它不会创建新的线程也不会执行调用线程的代码, 只会把 run 方法当作普通方法 ...

  5. 什么是 Executors 框架?

    Executor 框架是一个根据一组执行策略调用,调度,执行和控制的异步任务的框 架. 无限制的创建线程会引起应用程序内存溢出.所以创建一个线程池是个更好的的 解决方案,因为可以限制线程的数量并且可以 ...

  6. @Qualifier 注解?

    当有多个相同类型的 bean 却只有一个需要自动装配时,将@Qualifier 注解和 @Autowire 注解结合使用以消除这种混淆,指定需要装配的确切的 bean.

  7. 学习 MongoDB(一)

    1.介绍 MongoDB是C++语言编写,是一个基于分布式文件存储的开源数据库系统,MongoDB将数据存储为一个文档, 数据结构由键值对(key=>value)组成,MongoDB文档类似于 ...

  8. (stm32学习总结)—对寄存器的理解 _

    芯片里面有什么 我们看到的 STM32 芯片是已经封装好的成品,主要由内核和片上外设组成.若与电脑类比,内核与外设就如同电脑上的 CPU 与主板.内存.显卡.硬盘的关系.STM32F103 采用的是 ...

  9. 小程序输入框闪烁BUG解决方案

    前言 本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述 在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标 ...

  10. jq移动端图片预览 (fly-zomm-img.js)

    效果图: ===>==> 里面还与很多属性设置: index  关闭按钮等等 代码: //html-----------------------<div class="he ...