CSS媒體對象是一種非常實用的CSS布局技術,可以將復雜的內容塊分解成可重復使用的模塊。
.media { display: flex; /* 設置為flex布局 */ align-items: center; /* 垂直居中 */ } .media__figure { flex-shrink: 0; /* 不縮小 */ margin-right: 1rem; /* 右邊距為1rem */ } .media__content { flex-grow: 1; /* 自適應寬度 */ } .media__figure img { display: block; /* 圖片設置為塊級元素 */ max-width: 100%; /* 最大寬度為100% */ height: auto; /* 高度自適應 */ }
如上代碼為一個媒體對象的基本代碼,主要分為三個部分,figure部分為圖片,content部分為文字描述,包裹在媒體對象之內的容器media,使用flex布局,可以實現不同設備屏幕適配布局。
CSS媒體對象不僅美觀,而且具有適配性,根據不同的終端設備,可以靈活的調整布局方案。因此,這個技術被廣泛應用于響應式設計。
下一篇css如果相同怎么辦