設計師可以分為如下兩類:
創(chuàng)新互聯(lián)建站自2013年創(chuàng)立以來,先為伍家崗等服務建站,伍家崗等地企業(yè),進行企業(yè)商務咨詢服務。為伍家崗企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
HTML原生就是響應式的(HTML內(nèi)容在視口內(nèi)流式的分布)。隨著CSS的廣泛應用,設計者創(chuàng)建了許多固定布局的“盒子”并把內(nèi)容強制的放在盒子之中,這有悖于HTML原生響應的特性。
過去幾年出現(xiàn)了一場革命,包括自適應設計,響應式設計,移動優(yōu)先設計等。所有這些思想最根本部分就是優(yōu)先考慮內(nèi)容。CSS3也因此定義和實現(xiàn)一些新的屬性。其中就包括內(nèi)在和外在的寬度(intrinsic and extrinsic width values)。
我們以一個常規(guī)的 WEB 頁面設計問題(figure
元素內(nèi)的圖片)來引出問題并加以說明。
<figure>
<img src="o4iaq1g8nr.jpg" />
<figcaption>www.30ke.cn</figcaption>
<p>三十客 - 一個專注于前端學習和分享的網(wǎng)站。</p>
</figure>
因為figure
是塊級標記,所以元素一直延伸到至整個容器中。 在以內(nèi)容優(yōu)先的設計中,我們通常希望容器 (本例中為 figure
元素) 盡可能小。 到目前為止,有幾種方法可以實現(xiàn)。
figure {
float: left;
}
通過設置浮動,可以實現(xiàn) figure
元素折疊。但是如果 figure
中的 p
(段落)元素寬于圖片寬度,則figure
元素會收縮至最寬的子元素,而不是圖片的寬度。
使用display: inline-block
或 table-cell
同樣有上述問題。
figure {
width: 500px;
}
將 figure
元素寫死一個寬度,但這使得元素固定并失去響應特性。
min-width
來幫忙我們最終就是要找到最優(yōu)的圖片容器的寬度以最達到最好的適應內(nèi)部圖片的目的。如果內(nèi)部的文本換行顯示也沒關系。
我們可以通過 min-content
來達到目的。盡管該值 2006 年就出現(xiàn)了,但還處在實驗階段,因此需要添加不同瀏覽器前綴。
figure {
border: 2px solid black;
background: #cae9b8;
margin: 0;
width: -moz-min-content;
width: -webkit-min-content;
width: min-content;
}
上述代碼,很好的解決了上述問題。而且 margin
和 padding
在圖片容器內(nèi)部仍然有效。
min-content
是內(nèi)在和外在的寬高系列值中的一個,其它還包括 max-content
, fit-content
等。這些值和 flexbox
,grid
和其它布局系統(tǒng),使得WEB設計更優(yōu)秀更靈活。min-content
的支持性很好,所有現(xiàn)代主流瀏覽器都支持該值,但是 Internet Explorer
and Opera Mini
并不支持。
因此我們借助 max-widht
實現(xiàn)了回退的方案。
figure {
max-width: 500px;
max-width: min-content;
}
完整的帶回退的顯示方案見如下演示程序:
在線演示程序
原文地址
本文主要匯編自 Dudley Storey 的一篇博客,并加入了針對Internet Explorer
and Opera Mini
的回退方案。但是因為本人水平有限,文中難免存在描述不清,代碼不完善等問題,還請大家多多予以批評指正!
CSS Intrinsic & Extrinsic Sizing Module Level 3
Design From the Inside Out With CSS Min-Content
play.csssecrets.io/
網(wǎng)頁標題:使用min-content實現(xiàn)容器寬度自適應于內(nèi)部元素
轉(zhuǎn)載來于:http://muchs.cn/article20/ihecjo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供關鍵詞優(yōu)化、自適應網(wǎng)站、移動網(wǎng)站建設、網(wǎng)站內(nèi)鏈、外貿(mào)建站、虛擬主機
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)