如何在移動端實現純css的自定義布局？

01-05

如何在移動端實現純css的自定義布局？
比如在一個移動端頁面中，我想要定義一個寬度為80%，高度等於寬度的一個div，之前用js確實沒問題，但是我想知道，如何能用css實現。請大神指導。

div#target { width: 80vw; height: 80vw }

添加一個偽元素，利用 padding-top: 100% 撐開容器實現等寬高。手機碼字不便貼代碼，具體可以參考我以前的一篇文章： https://idiotwu.me/css-responsive-square/

你說的我並不明白~ 什麼叫做js實現80%的寬度？你的意思是js來獲取頁面寬度，然後用js修改css的height值么？

我只是對賀老的答案做個資料補充的，並且只提供傳送門，七個冷門單位

http://www.admin10000.com/document/5463.html

大致提供個思路，

就是通過紅色div，來當個中介。

demo &>&> A Pen by Joy Youger

這個問題無論在 PC 還是移動端，都可以用純 CSS 來實現..

就是 @Dolphin Wood 所說的方法，我再補充一點，利用 height + padding-top 可以得到一個任意長寬比 的元素.

Responsive background images with fixed or fluid aspect ratios 這篇文章中介紹了此方法..可以詳細看一下

賀老說的那種方法，新單位我沒用過，查了下兼容性不是很好

補充一下, 利用 height 和 padding-top 可以實現 動態長寬比 (非固定長寬比)

{

width: 80%;

padding-top: 80%;

height: 0%;

}

不考慮兼容性可以用新單位vw,vh等，這個表示相對於屏幕寬度，高度的百分比，可以設置為width:80vw,height:80vh，表示寬和高都是相對於屏幕的80%

搜索下響應式布局。

media query媒體查詢！判斷瀏覽器寬度，設置相應的屬性！bootstrap建議你去看看CSS源碼