7
Vue适配PC+大屏,手机+ipad适配
source link: https://segmentfault.com/a/1190000039997533
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue适配PC+大屏,手机+ipad适配
PC+大屏适配
可适配 1400px以上的屏幕
设置设计稿-转换rem
我们的设计稿是3840px宽度,所以widthOfDesignLayout
设置3840
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的比列,查看该插件
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;
其他解决方案
阅读 219发布于 5 月 13 日
vipbic
vipbic是一个关注前端开发、网址导航、学习视屏免费下载、HTML5、CSS3、JavaScript、PHP的前端杨航开发...
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK