移動端布局，div按比例布局，寬度為百分比，但又想讓高度和寬度一樣，即讓div為正方形，怎麼做布局呢？

一個div寬度比例width:20%，比如是屏幕寬度的20%,想讓高度和寬度一樣，即讓這個div是正方形，怎麼實現呢？因為做的是移動端，屏幕寬度不定，又想讓這個div盒子寬高一樣，呈現為正方形。怎麼辦呢

---

我覺得這個是你要的效果：

body {
width: 100%;
font-size: 0;
text-align: center;
}
div{
display: inline-block;
width: 20%;
background: green;
font-size: 12px;
position: relative;
vertical-align: middle;

:nth-child(2n){
background: orange;
}

:before {
content:"";
display: inline-block;
padding-bottom: 100%;
width: .1px;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
font-size: 4em;
color: #fff;
}
}


CodePen - A Pen by Airen

效果如下圖：

---

來個非主流...

.ui-square {
width: 20%;
height: 0;
padding-bottom: 20%;
background: blue;
}


JS Bin - Collaborative JavaScript Debugging

---

width:20vw;

height:20vh; --&> height:20vw;（感謝提醒）

---

html - How to maintain the aspect ratio of a div using only CSS

這種事情谷歌一下就好。最簡單的方式是使用 vw/vh 單位，viewport width/height：& - CSS

---

不考慮用腳本？

---

.box{
position:relative;
width:20%;
height:0;
font-size:0;
line-height:0;
padding:0 0 20%;
}
.box &> .content{
position:absolute;
width:100%;
height:100%;
}


---

div {
width: 20vw;
height: 20vw;
}


---

使用padding在移動端很常見，使圖片按比例縮放等都可使用。

---

感謝高票答案@大漠 的，再看了一遍w3school關於padding的描述，又長知識啦。

共勉

CSS padding 屬性

截圖如下：

---

padding：50% 0；

---

不是直接100%寬度父元素下元素寬度100%,高度100%么？子元素高度由父元素寬度決定的

---

div.style.h=div.offsetWidth+"px";

為什麼不用js呢。也不那麼笨重啊。

---

有用

---

我有一個比較hack的實現，見我在stack overflow的回答 : javascript - Make Dynamic square div for an memory game

---

可以用 vmin 單位：

height:20vmin;
width:20vmin;


當高度大於寬度時，相當於 width:20%

當寬度大於高度時，就換成 vmax，

（可以用 @media 區別開來 ）

@media screen and (min-aspect-ratio: 1/1)


演示： http://codepen.io/anon/pen/aOEawd

參考 CSS3 取值與單位模組

CSS媒體查詢 - Web 開發者指南

---

我是使用rem+css媒體查詢的

其實如果要實現正方形的話任何一個固定單位都可以

重點是要在絕大部分設備上看起來一樣，所以媒體查詢少不了

@media only screen and (min-width : ***px) {***}

#mydiv {

height:20rem;width:20rem;

background:white;

-webkit-border-radius:2rem;

-webkit-box-shadow:0 0 0.5rem rgba(0,0,0,0.23);

}

看起來像這樣

---

推薦閱讀：