webpack config
//加入postcss插件
postcss: [
//...
require('postcss-aspect-ratio-mini')
]
scss
//给需要实现像素比的容易定义一个伪元素
.parent{
position: relative;
width: 150px;
//给元素定义像素比
//注意这里有个bug如果直接把像素比定义在上面那群属性中会清除原有的属性
//最好是重新写一个选择器来定义像素比属性 像这样 利用属性选择器
&[aspect-ratio='562/560']{
aspect-ratio: '562:560';
};
&:before{
content: '';
display: block;
width: 1px;
margin-left: -1px;
height: 0;
}
//如果需要在容器中添加内容 需要在容器中增加一个元素
//填满父元素 跟随父元素的尺寸改变 父元素则跟随宽度改变整体高宽
.content{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}
