可适配 1400px以上的屏幕css
咱们的设计稿是3840px宽度,因此widthOfDesignLayout
设置3840git
module.exports = { plugins: { autoprefixer: {}, "@njleonzhang/postcss-px-to-rem": { unitToConvert: "px", widthOfDesignLayout: 3840, // 设计稿的宽度 unitPrecision: 3, // 十进制的单位. selectorBlackList: [".ignore", ".hairlines"], // 过滤那些不用转换的class minPixelValue: 1, // 设置要替换的最小像素值. mediaQuery: false, // 容许在媒体查询中转换px }, }, };
在main.js下,保证在屏幕缩放的过程当中也是16:9的比列,查看该插件github
const dashboardFlexible = require('lib-flexible-for-dashboard'); dashboardFlexible.init(16/9)
设计给出多少就是多少post
button { width: 465px; height: 112px; }
可适配手机+ipad字体
演示地址flex
项目地址ui
css: { loaderOptions: { postcss: { plugins: [ require("postcss-pxtorem")({ rootValue: 75, // 换算的基数 1rem = 75px 这个是根据750px设计稿来的,若是是620 的就写 62 // 忽略转换正则匹配项。插件会转化全部的样式的px。好比引入了三方UI,也会被转化。目前我使用selectorBlackList字段,来过滤 //若是个别地方不想转化px。能够简单的使用大写的 PX 或 Px 。 selectorBlackList: ['van-'], propList: ["*"], // 须要作转化处理的属性,如`hight`、`width`、`margin`等,`*`表示所有 }), ], }, }, },
import 'lib-flexible'
设计给的是750px的设计稿 是多少填多少,好比这个框的高度是96px就直接写96pxspa
设计稿是多少就是多少.net
height: 72px; background: rgba(238, 238, 238, 0.5); border-radius: 36px;