CSS实现比例布局

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第八天，点击查看活动详情

题引：

收到新的需求，需要开发一个混合编程的项目，界面用vue来实现、功能方面调用原生安卓，最终嵌套在平板上进行运行。 啊这，我只是个实习生好难哦，不过还是直接开干了。一开始遇到的问题就是，需要宽高按照16:9的比例进行开发，诶呀，这我熟悉。 下面将讲解可以进行比例开发的几种方法

正文：

接下来的例子中，.container是整体父元素，content是子元素，可以用百分比实现，也可以用vw替代。

1.aspect-ratio

这个可谓是神器公式，直接输入比例即可。

.container{
    width:100%;
    aspect-ratio: 16/9;
    background-color: yellow;	
}
.content{
    width: 100%;
    height: 100%;
}

2.calc

我们平常会使用calc公式来计算响应式宽高，这个也是可以实现比例。

.container{
    position:relative;
    height:0;
    width:100%;
    padding-top:calc(100% * 9 / 16);
    background-color: yellow;	
}
.content{
    position:absolute;
    top:0;
    left:0;
}

在上面的例子中，我们把父元素的高度设置为0时，再加上内边距进行撑开，就会形成一个比例盒子。但是它的子元素会被填充在盒子下面，所以我们需要使用子绝父相进行配合。

当然，我们还可以直接给高度赋值的方式。

.container {
    width: 100%;            
    height: calc((100vw * 9) / 16);
    background-color: yellow;
}

.content {
    width: 100%;
    height: 100%;
}

上面的方法更加的简单粗暴通俗易懂。

3.padding

第二点的例子中提到了该方法，但还是要讲一下。

该方法主要通过内边距撑开+子绝父相定位法来实现我们的比例盒子。

.container{
    position: relative;
    height: 0;
    width: 100%;
    padding-top: 56.25%;
    background-color: yellow;
}
.content{	
    position: absolute;
    left: 0;
    right: 0;	
    top: 0;
    bottom: 0;
}

在上面的例子中，16/9的比例盒子转化过来就是56.26%。不过该方法需要去计算，我个人不是很推荐，不如公式来的实在。

结尾：

以上就是可以实现比例盒子的方法，希望能帮到你~