上篇在移動web開發基礎-百分比+flex布局方案中說到了比例盒子的實現，因為在移動端，需要適應各種螢幕寬度的裝置，所以我們的以及其他一些元素需要根據螢幕寬度自適應的等比例縮放，這裡就需要用到比例盒子的布局方法。接下來讓我們一起來了解下實現比例盒子的幾種方法吧！
這裡會介紹四種實現方式，分別是用css的vw單位，垂直方向的padding或者margin，以及因此產生的問題而衍生的用偽元素實現的解決方法。
注意：按照規定，margin, padding 的百分比數值是相對父元素寬度的寬度計算的。寬度高度都用同乙個單位vw，其他比例也是相應的計算元素寬高佔螢幕寬度的百分比。
class="vw">div>
.vw垂直方向的padding（padding-top/padding-bottom），因為是用padding撐開的，所以子元素會跑到區域外，所以該容器要相對定位，子元素一般全部絕對定位在裡面。
//因為必須要有父元素的寬度作為計算的參照，所以新增了乙個容器，
開發時自己清楚父元素的寬度就行，一般父元素100
%寬度比較方便計算。
"padding-wp"
>
"padding"
>
.padding-wp
.padding
max-height不起作用，是因為 max-height 屬性只限制於 height，也就是只會對元素的 content height 起作用，那麼我們是不是能用乙個子元素撐開 content 部分的高度，從而使 max-height 屬性生效呢？於是我們就用偽元素的方式來實現。
class="padding-wp-after">
class="padding-after">div>
div>
.padding-wp-after
.padding-after
.padding-after:after
這裡我們就能看到max-height起作用了。
這裡用偽元素的margin-top來撐開了父容器的空間，但是會發現父容器多了乙個屬性overflow: hidden;這是因為要觸發元素的bfc屬性，不然margin會有穿透的問題。
本文介紹了幾種實現比例盒子的方法，不對相信看完此文的你應該也知道了以上方法的利弊，方法一的相容性不言而喻，方法二會有max-height的問題，方法四margin經常會有穿透，重疊，對上下文影響比較大也不推薦，所以，你應該猜到了，我推薦方法三！用偽元素以及定位的方法實現，如果你用了less/sass這樣的css預編譯語言，那你就可以寫乙個比例盒子的混淆，方便在其他地方呼叫。比如
//等比例的盒子
@mixin
liftsizebox ($size:20%)
>.inner
}//背景圖實現的等比圖,預設正方形
@mixin
liftsizepic ($width:20%,$height:$width)
}
width="100%" height="400" scrolling="no" title="zayeyz" src="" allowfullscreen="true">see the pen zayeyz by luke.deng (@xiangshuo1992) on codepen.
本文參考：
純 css 實現自適應正方形
移動Web開發基礎概念
2 視口 viewport 3 css屬性之box sizing 1.1 解析度以物理畫素作為基準，不同裝置的物理畫素單位大小不同 1.2 物理畫素 裝置畫素 物理畫素只與裝置有關 1.3 css畫素 邏輯畫素 實際開發中使用的畫素 1.4 裝置畫素比 dpr dpr 物理畫素 css畫素 dpr ...
移動web開發
1.為什麼去學習移動web？已經從趨勢變成了乙個主流了，網際網路的流量入口已經大於pc端的流量入口2.相容性在國內的移動web瀏覽器，絕大部分都是基於webkit核心的，所以一些css3效果，h5的新特性絕大部分都被支援，需要新增字首。不同機型之間可能會略有不同，這個需要踩坑 在移動端，做動畫一律用...
移動web開發1
學習了viewport視口及相應的屬性 viewport 視口屬性 該屬性只在移動端瀏覽器上才有用。name viewport 告訴瀏覽器 我這個meta標籤設定的是viewport屬性 content設定的是屬性的值 屬性名不能亂寫 有固定的取值 width 寬度 device width 裝置的...