一幫來說，pc端的靜態頁一般都是畫素為基本單位，基本都是卡尺卡出來的，只要是有耐心，一般沒什麼大問題

而移動端的對應的終端的螢幕的大小差異太大了，為了適配不同的螢幕這時候就不能以畫素px為單位了，更多的是相對的百分比%

一行平均顯示兩個圓並且寬高相同而且隨著螢幕的大小的變化進行縮放，一般來說可以這樣

一個大div中2個小div，這兩個小div寬是大div的50%，高度呢就有些說法了，如果高度用百分比的話相對的父級的，但是父級預設是被子級撐開的，所以寫百分百是不行的，寫多少高度都是0，但是預設的padding，margin是相對父級的寬，所以我們可以設定padding-top或者padding-bottom是跟父級的寬度一樣實現這個效果，

HTML：

<div class="main">
	<div></div><div></div>
</div>

<style>
body,html{
	margin:0;
	padding:0;
}
.main{
	width:100%;
}
.main div{
	width:50%;
	display:inline-block;
	background-color:#F00;
	padding-top:50%;
	border-radius:100%;
}
</style>

因為字預設給撐開了，這時候沒有辦法了，只能採用position;absolute來搞定

HTML

<div class="main">
	<div><span>1</span></div><div><span>2</span></div>
</div>

<style>
body,html{
	margin:0;
	padding:0;
}
.main{
	width:100%;
}
.main>div{
	width:50%;
	display:inline-block;
	background-color:#F00;
	padding-top:50%;
	border-radius:100%;
	line-height:100%;
	position:relative;
}
.main>div>span{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-8px;
	margin-top:-4px;
}
</style>
 

當然如果裡面的字的長度是不定的，這種方法就不行了，恐怕只能用JS了

還有一個更簡單的用vw，vh，程式碼比較簡單：

HTML：

<div class="main">
	<div>1</div><div>2</div>
</div>

<style>
body,html{
	margin:0;
	padding:0;
}
.main{
	width:100%;
}
.main>div{
	display:inline-block;
	width:50vw;
	height:50vw;
	background-color:#F00;
	border-radius:100%;
	line-height:50vw;
	vertical-align:middle;
	text-align:center;
	
}

</style>

不過也有問題，字不能太多，太多就跑到圖外面去啦！而且相容性不是非常好，低端的瀏覽器可能不支援