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

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

需要解決問題：

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

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

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

　　　　　　　4，兼容移動端。

編寫html

思考一，使用height：100%，

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

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

思考二，設定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)

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

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

對照表

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

雖然代碼有點復雜，但是靈活性強，可以實現(xiàn)更多類似的效果。

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

該方法的原理很清晰：

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

設置:before元素邊界，解析原理：

思考五，使用圖片，兼容低檔次移動設備。

使用腳本，css更加簡潔明了，目標清晰。

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

最新評論