webpack config
//加入postcss插件
postcss: [
//...
require('postcss-aspect-ratio-mini')?
]
scss
//給需要實(shí)現(xiàn)像素比的容易定義一個(gè)偽元素
.parent{
position: relative;
width: 150px;
//給元素定義像素比
//注意這里有個(gè)bug如果直接把像素比定義在上面那群屬性中會(huì)清除原有的屬性
//最好是重新寫一個(gè)選擇器來(lái)定義像素比屬性 像這樣 利用屬性選擇器
&[aspect-ratio='562/560']{
aspect-ratio: '562:560';
};
&:before{
content: '';
display: block;
width: 1px;
margin-left: -1px;
height: 0;
}
//如果需要在容器中添加內(nèi)容 需要在容器中增加一個(gè)元素
//填滿父元素 跟隨父元素的尺寸改變 父元素則跟隨寬度改變整體高寬
.content{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}
