实现容器像素比(宽高比)

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%;
    }
}