webpack config

//加入postcss插件
postcss: [
//...
require('postcss-aspect-ratio-mini')?
]

scss

//給需要實現(xiàn)像素比的容易定義一個偽元素
.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;
    }
    //如果需要在容器中添加內(nèi)容 需要在容器中增加一個元素
    //填滿父元素 跟隨父元素的尺寸改變 父元素則跟隨寬度改變整體高寬
    .content{
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        width: 100%; 
        height: 100%;
    }
}