在開發過程中,會有這麼乙個情況,需要將乙個盒子的尺寸定義為固定比例,且尺寸需根據檢視的尺寸來進行縮放,也就是響應式,常見的多如有矩形、圓形等。
其實實現這個效果,有多種方法,下面逐一介紹。
相信大家對padding
都不陌生,但你知道他是如何取值的嗎?
看一下mdn中對padding
給出的解釋:
指定乙個,兩個,三個或四個下列的值:也就是說,給
padding
的值設定為百分比時,將根據父容器的寬度來計算。
現在假設我們有乙個div
,我們希望它的尺寸能根據body
(它的父容器)的寬度來實現固定比例:
樣式部分class="box">
div>
複製**
.box
複製**
其實這裡的沒錯,就這麼簡單,我們已經實現了文章開頭所展示的效果。padding-bottom
換成padding-top
也一樣可以實現。
但是我們使用這種方法的時候需要注意幾點:
不需要設定height
,最好就是手動設定為0
。
子元素需要設定為絕對定位(父容器為相對定位),否則子元素將被padding
擠出去。
其它比例
前面實現的是乙個正方形比例的,那如果我想要是16:9
的呢?
那我們將根據乙個公式:width * x / y
計算,如下:
.box
複製**
視窗是你的瀏覽器實際顯示內容的區域——換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是也就是說,網頁的寬度是vw
,vh
,vmin
和vmax
。它們都代表了瀏覽器(視窗)尺寸的比例和視窗大小調整產生的規模改變。
100vw
,取一半就是50vw
,無論怎麼縮放都是一半,而且這個一半不止可以用在width
上。
所以:
class="box">
div>
複製**
乙個正方形就出來了,簡單嗎???.box
複製**
其它比例
跟上面一樣,通過公式可以得到:
通過以上兩種方法,以後實現固定比例的盒子是不是變得簡單起來了?.box
複製**
css實現乙個元素高度固定寬度按比例顯示效果
用padding top百分比可以實現寬度固定高度按比例展示,現在的需求是對乙個video 的盒子div高度是固定的,寬度如何按比例展示?解決後效果如圖 紅框標註的即是我在上面高度比例固定的範圍內寬度自適應的效果 css content btn play iframe,object,embed,vi...
CSS簡單實現乙個箭頭
如題,用簡單幾行css 實現乙個箭頭。其實有很多不同的方法可以實現,比如旋轉乙個有背景顏色的div,再把多餘的部門覆蓋掉等等。在這裡記錄一下不同思路。css divhtml 就乙個div 效果圖 解析 關鍵在於對邊框的理解。首先給出乙個div,四周加上邊框,再放大邊框看一看效果 很明顯了,把邊框設定...
純CSS實現乙個氣泡框
實現原理 主要通過css的border color屬性,結合 before after和position absolute實現。1 畫乙個正方形或長方形的盒子,別忘記此盒子需加上position relative,不然之後的絕對定位元素會相對於其餘設了position relative的父級元素或w...