PC+大屏适配
可适配 1400px以上的屏幕
设置设计稿-转换rem
我们的设计稿是3840px宽度,所以widthOfDesignLayout
设置3840
module.exports = { plugins: { autoprefixer: {}, "@njleonzhang/postcss-px-to-rem": { unitToConvert: "px", widthOfDesignLayout: 3840, // 设计稿的宽度 ,就是设计的UI宽度 unitPrecision: 3, // 十进制的单位. selectorBlackList: [".ignore", ".hairlines"], // 过滤那些不用转换的class minPixelValue: 1, // 设置要替换的最小像素值. mediaQuery: false, // 允许在媒体查询中转换px }, }, };
设置根节点字体
在main.js下,保证在屏幕缩放的过程中也是16:9的比列,查看该插件
const dashboardFlexible = require('lib-flexible-for-dashboard'); dashboardFlexible.init(16/9)
开发
设计给出多少就是多少
button { width: 465px; height: 112px; }
手机+ipad适配
可适配手机+ipad
转换Rem
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就直接写96px
设计稿是多少就是多少
height: 72px; background: rgba(238, 238, 238, 0.5); border-radius: 36px;