盒子自適應—寬高比值固定
多用於移動端的項目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子自適應—寬高固定比例</title>
<style>
*{
/*margin: 0;
padding: 0;
box-sizing: border-box;*/
}
/*以上全局樣式 可有可無 根據實際項目決定*/
#box{
max-width: 100%;
padding-bottom: 50%;
height: 0;
overflow: hidden;
background-color: pink;
}
/*1.max-width 讓寬度自適應
*2.padding-bottom 是盒子真正的高度
* 因此，盒子的寬高比值是100%:50%(2:1)
*3.由於用2實現了盒子的高度,盒子的height是0
*4.overflow 溢出的部分可以隱藏
*5.小demo爲了能看見盒子，設置背景顏色
*6.修改以上兩個百分比 即可修改寬高比值*/
</style>
</head>
<body>
<div id="box">
<p>此盒子的寬高比值是2:1(100%:50%)</p>
</div>
</body>
</html>