文字 盒子大小響應式

2021-09-24 03:47:20 字數 991 閱讀 4880

根據**查詢解決

html 

@media only screen and (min-width: 100px) and (max-width: 1366px)

div}@media only screen and (min-width: 1366px) and (max-width: 1920px)

div}

用百分比解決

這裡需要運用乙個小技巧,padding用百分比做單位時是相對於容器的寬度來算的。

所以你可以把高度設為0,內容自然溢位,設定個padding-bottom

/** 那麼這個div的寬高比就是  50% : 30%**/

div

用 js 解決

(function (doc, win)  else 

} if (!doc.addeventlistener) return

win.addeventlistener(resizeevt, recalc, false)

doc.addeventlistener('domcontentloaded', recalc, false)

/* domcontentloaded是firefox下特有的event, 當所有dom解析完以後會觸發這個事件。

domcontentloaded事件本身不會等待css檔案、、iframe載入完成。

它的觸發時機是:載入完頁面,解析完所有標籤(不包括執行css和js),

並如規範中所說的設定interactive和執行每個靜態的script標籤中的js,然後觸發。

而js的執行,需要等待位於它前面的css載入(如果是外聯的話)、執行完成,

因為js可能會依賴位於它前面的css計算出來的樣式。 */

})(document, window)

CSS3響應式布局之彈性盒子

css3彈性盒模型可以輕鬆的建立自適應瀏覽器流動視窗的布局或自適應字型大小的布局。同時該盒子決定了乙個盒子在其他盒子的分布方式,及如何處理可用的空間。自己寫了乙個彈性盒子的demo 主要html 123 4css 在不用 webkit box align center webkit box pack...

CSS3響應式布局之彈性盒子

css3彈性盒模型可以輕鬆的建立自適應瀏覽器流動視窗的布局或自適應字型大小的布局。同時該盒子決定了乙個盒子在其他盒子的分布方式,及如何處理可用的空間。自己寫了乙個彈性盒子的demo 主要html 12 34css 在不用 webkit box align center webkit box pack...

盒子 文字陰影

一.html css3盒子 文字陰影 box shadow 是你個css3的乙個新屬性,用來實現陰影效果,陰影分為內陰影和 影兩個效果,可以通過逗號新增多個陰影效果。box shadow陰影用法 box shadow inset offset x offset y blur radius sprea...