有点跑偏了,主要想分享postcss-px-to-viewport的使用。...先安装: npm install postcss-px-to-viewport --save-dev 新建postcss.config.js文件,然后配置: module.exports = { plugins...: { 'postcss-px-to-viewport': { viewportWidth: 750, minPixelValue: 1, unitPrecision...: 5, } } } 配置项有很多,可以自行查看,还能配置不转换之类的: https://github.com/evrone/postcss-px-to-viewport/blob/HEAD
postcss-px-to-viewport 当前版本 1.1.1 github地址 vue.config.js 配置 const autoprefixer = require('autoprefixer...'); const pxtoviewport = require('postcss-px-to-viewport'); module.exports = { outputDir: 'dist/demo
对于postcss我以前在webpack从0到1-less、sass、postcss 就提到过,可以将它理解为是一个平台化的概念,有很多插件被大家开发出来为它赋能,实现vw适配就是要利用这么一个插件:postcss-px-to-viewport...,先安装它: $ npm install postcss-px-to-viewport --save-dev 它可以将我们设置px值自动转化为相应的vw、vh之类的值。...module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', viewportWidth...[], landscape: false, landscapeUnit: 'vw', landscapeWidth: 568 } } } 各参数的含义:postcss-px-to-viewport...4、小结 其实使用vw来实现移动端的适配还是比较简单的,主要就是使用postcss-px-to-viewport这个插件。
要使用viewport适配 我们必须安装postcss-px-to-viewport这个包。这包名是不是有一种似曾相识的感觉。 没错,上篇文章中我们使用过postcss-pxtorem。...postcss-px-to-viewport则是将px单位转换为vw、vh //引入 postcss-px-to-viewport npm install postcss-px-to-viewport...在文件中写入如下代码: //postcss.config.js module.exports = { plugins: { 'postcss-px-to-viewport': {...大家可以去参考一下postcss-px-to-viewport作者的github[4] 值得注意的是:postcss-px-to-viewport 同样存在第三方组件库兼容性的问题。...375 : 750; return { plugins: { autoprefixer: {}, "postcss-px-to-viewport": {
/assets/style/vant-theme.css' 移动端适配 npm install postcss-px-to-viewport vite.config.js import { defineConfig...} from 'vite' import vue from '@vitejs/plugin-vue' import pxtovw from 'postcss-px-to-viewport' export...css: { postcss: { plugins: [ pxtovw({ // 更多配置参考:https://github.com/evrone/postcss-px-to-viewport
之间的较大值 使用步骤 假设视觉设计稿的宽度是 750px 即 1vw = 7.5px,那么就得根据设计图的 px 值来转换 vw单位,为了避免这样的计算,当然就需要使用到 PostCSS ,以及 postcss-px-to-viewport...应该都有看到过项目根目录下面都会有一个 .postcssrc 文件,它里面都是一些配置选项比较著名的 autoprefixer,cssnano,px2rem,cssnext...等等好玩的配置插件,但是这里不作这些说明,只介绍 postcss-px-to-viewport...配合 vw 使用 Npm: npm i -S postcss-px-to-viewport 复制代码 打开 .postcssrc,假定视觉设计稿的宽度为 750px 改写配置如下: //......"plugins": { "postcss-px-to-viewport": true }, "rule": { "postcss-px-to-viewport": { "viewportWidth...复制代码 配置完成之后,在项目中直接使用 px ,构建的时候就会自动转换为 vw 单位了,简直不要太爽了;postcss-px-to-viewport 配置项说明 "viewportWidth"
项目中使用vw实现移动端适配 ####正文开始 使用vue-cli新建项目 安装依赖 复制以下代码: 复制进行 postcssrc.js 配置 .postcssrc.js配置 ###各插件的功能: postcss-px-to-viewport...: 将项目中的px转化为vw 容器适配,可以使用vw 文本的适配,可以使用vw 大于1px的边框、圆角、阴影都可以使用vw 内距和外距,可以使用vw postcss-px-to-viewport文档
3. postcss-px-to-viewport 它是一个编译时将css中px单位转化为vw、vh、vmin、vmax的插件,在移动端开发时也是最为常用的一个插件。...yarn add -D postcss postcss-px-to-viewport // 或者 npm install postcss postcss-px-to-viewport --save-dev...options: { postcssOptions: { plugins: [ require("postcss-px-to-viewport
Varlet组件库的设计就是基于375px宽度的设计稿,然后使用postcss-px-to-viewport进行移动端适配,这个PostCSS插件会将px单位转换成vw单位,1vw等于1/100的视口宽度...100 = 3.75px,那么100px / 3.75px = 26.66vw ,公式如下: vw = px / (viewportSize / 100) 接下来我们从零创建一个Vite项目来看一下postcss-px-to-viewport...假设我们的设计稿就是375px,那么我们切换到尺寸更大一点的机型看看: 图片 直接上iPad,可以看到按钮尺寸没有变,但是因为屏幕变大了而显得按钮太小了,这显然是不够友好的,接下来我们就配置一下postcss-px-to-viewport...插件文档,先安装: npm install postcss-px-to-viewport 然后创建postcss.config.js文件,写入如下内容: module.exports = { plugins...: { "postcss-px-to-viewport": { // 需要转换的单位 unitToConvert: "px", // 设计稿的视口宽度
使用 按照官网的说明,按需引入一下即可,比如我们在main.js中引入一下: // main.js import { Button } from 'vant' Vue.use(Button) 如果你使用postcss-px-to-viewport...module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', viewportWidth
750px的设计图,由于rootValue: 37.5为基准,在写css时候设计图上文字大小多少像素就写多少像素即可 cnpm install axios --save 第二 laravel-mix使用postcss-px-to-viewport...public/js') .postCss('resources/assets/css/app.css', 'public/css') .options({ postCss: [ require('postcss-px-to-viewport
其他插件 我们要完成vw的布局兼容方案,或者说让我们能更专心的撸码,还需要配置下面的几个PostCSS插件: postcss-aspect-ratio-mini postcss-px-to-viewport...postcss-aspect-ratio-mini": "^0.0.2", "postcss-cssnext": "^3.1.0", "postcss-import": "^11.1.0", "postcss-px-to-viewport...postcss-px-to-viewport postcss-px-to-viewport插件主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位,也是vw适配方案的核心插件之一。...在配置中需要配置相关的几个关键参数: "postcss-px-to-viewport": { viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,...特别是在我们的这个场景中,咱们使用了postcss-px-to-viewport这个插件来转换vw,更无法让我们人肉的去添加content内容。
== 'h5' }, // 借助postcss-px-to-viewport插件,实现rpx转px,文档:https://github.com/evrone/postcss-px-to-viewport.../blob/master/README_CN.md // 以下配置,可以将rpx转换为1/2的px,如20rpx=10px,如果要调整比例,可以调整 viewportWidth 来实现 'postcss-px-to-viewport
Vue框架在PostCSS中使用sass的方法 使用PostCss的原因 大家都知道转换px单位的插件很多,著名的有postcss-px-to-viewport和postcss-pxtorem,前者是将
该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能,精简了不常用的配置。默认将 vw 作为优先单位使用,以 rem 作为回退模式。
require('postcss-aspect-ratio-mini'), require('postcss-write-svg'), require('postcss-px-to-viewport
hammer.js 和一篇关于 require.context 的文章: H5 案例分享:JS 手势框架 —— Hammer.js[57] 使用 require.context 实现前端工程自动化[58] 样式适配 postcss-px-to-viewport...关于 vw,可以使用 postcss-px-to-viewport 进行自动转换 px 到 vw。...postcss-px-to-viewport 相关配置如下: "postcss-px-to-viewport": { viewportWidth: 375, // 视窗的宽度,对应的是我们设计稿的宽度...201609/hammerjs.html [58] 使用 require.context 实现前端工程自动化: https://www.jianshu.com/p/c894ea00dfec [59] postcss-px-to-viewport...: https://github.com/evrone/postcss-px-to-viewport [60] Viewport Units Buggyfill: https://github.com/
领取专属 10元无门槛券
手把手带您无忧上云