需求描述：移動(dòng)端實(shí)現(xiàn)橫跨頁(yè)面半圓。（類似問(wèn)題，實(shí)現(xiàn)4x4的正方形網(wǎng)格）

簡(jiǎn)化問(wèn)題，我們可以理解為實(shí)現(xiàn)一個(gè)高度和寬度比為1:2的塊。

需要解決問(wèn)題：

　　　　　　　1，高度和寬度按照一定比例。

　　　　　　　2，外容器高度和寬度不確定。

　　　　　　　3，盡量不使用圖片和腳本替代。

　　　　　　　4，兼容移動(dòng)端。

編寫html

<p class = "semicircle"></p>

思考一，使用height：100%，

body{ 
 margin:0; 
 width: 100%; 
 background: lightblue; 
} 

.semicircle { 
 width: 100%; 
 height: 100%; 
 border-top:5px solid #fff; 
 border-radius: 100%; 
}

　　存在問(wèn)題，height的百分比是根據(jù)父容器計(jì)算的，不是當(dāng)前容器，根本滿足不了我們的需求。效果如下：

父容器body的高度百分比為其子容器所填充的高度關(guān)聯(lián)，即便設(shè)置body高度100%，由于子容器即semicircle所填充的實(shí)際高度為邊界的5，無(wú)法將父容器“全部撐開”，因此無(wú)法通過(guò)設(shè)定父容器的高度為百分比指定寬高按照一定比例的容器。

思考二，設(shè)定padding-top或padding-bottom為100%
The percentage is calculated with respect to the width of the generated box's containing block [...] (source: w3.org, emphasis mine)

百分比寬度的計(jì)算與所生成盒子的包含塊寬度有關(guān)。padding-top、padding-bottom的百分比是根據(jù)父容器的width（寬度）計(jì)算的，而不是height（高度）。其他比例實(shí)現(xiàn)對(duì)照表

body{ 
 margin:0; 
 width: 100%; 
 background: lightblue; 
} 

.semicircle { 
 width: 100%; 
 height: 0; 

 padding-bottom: 100%; 
 border-top:5px solid #fff; 
 border-radius: 100%; 
}

思考三，使用vw單元
使用vw單元設(shè)定元素高度和寬度，vm的大小是通過(guò)viewport的寬度設(shè)定的，因此可以通過(guò)該方法保持容器按照一定比例顯示。一單位的vw等于百分之一的viewport寬度，即100vw等于100%viewport寬度。

body{ 
 margin:0; 
 width: 100%; 
 background: lightblue; 
} 

.semicircle { 
 width: 100vw; 
 height:100vw; 
 border-top:5px solid #fff; 
 border-radius: 100%; 
}

對(duì)照表

思考四，使用偽元素和inline-block布局

body { 
 width: 100%; 
 font-size: 0; 
 text-align: center; 
 background: lightblue; 
} 
.semicircle { 
 border-top:5px solid #fff; 
 border-radius: 100%; 
} 

.semicircle:before { 
 content:""; 
 display: inline-block; 
 padding-bottom: 100%; 
}

雖然代碼有點(diǎn)復(fù)雜，但是靈活性強(qiáng)，可以實(shí)現(xiàn)更多類似的效果。

當(dāng)需求改成實(shí)現(xiàn)一個(gè)橫跨屏幕80%的寬度的半圓，我們只需要在.semicircle中添加屬性width:80%;，順便也把容器居中實(shí)現(xiàn)了。

該方法的原理很清晰：

參考思考一，無(wú)法通過(guò)高度100%來(lái)擴(kuò)充外容器高度，那么可以通過(guò)偽元素，插入一個(gè)高度和寬度一致的元素，將容器撐開成一比一高度的容器。注意，該方法實(shí)現(xiàn)半圓，實(shí)際需要寬高為一比一的容器，即占用空間為上述方法的兩倍。

設(shè)置:before元素邊界，解析原理：

思考五，使用圖片，兼容低檔次移動(dòng)設(shè)備。

semicircler img { 
 width: 100%; 
 background-repeat: no-repeat; 
 background-size: 100% 100%; 
 background-image: url(../img/autoresized-picture.jpg); 
}

使用腳本，css更加簡(jiǎn)潔明了，目標(biāo)清晰。

p.style.height=p.offsetWidth+"px";

對(duì)于實(shí)現(xiàn)2*2正方形網(wǎng)格

*------main code-------*/ 
 body { 
 width: 100%; 
 margin:0; 
 text-align: center; 
 } 
 p{ 
 display: inline-block; 
 width: 50%; 
 background: lightblue; 
 font-size: 12px; 
 position: relative; 
 vertical-align: middle; 
 } 

 p:before { 
 content:""; 
 display: inline-block; 
 padding-bottom: 100%; 
 vertical-align: middle; 

 } 

 /*------other code-------*/
 p:nth-child(2),p:nth-child(3){ 
 background: pink; 
 } 


 span { 
 display: inline-block; 
 vertical-align: middle; 
 font-size: 6em; 
 color: #fff; 
 }

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com