資訊專欄INFORMATION COLUMN
摘要：到目前為止，有幾種方法可以實(shí)現(xiàn)。通過設(shè)置浮動(dòng)，可以實(shí)現(xiàn)元素折疊。將元素寫死一個(gè)寬度，但這使得元素固定并失去響應(yīng)特性。用來幫忙我們最終就是要找到最優(yōu)的圖片容器的寬度以最達(dá)到最好的適應(yīng)內(nèi)部圖片的目的。
前言
設(shè)計(jì)師可以分為如下兩類：
先做好設(shè)計(jì)，然后將內(nèi)容放入靜態(tài)框架中
優(yōu)秀的設(shè)計(jì)師充分考慮內(nèi)容的各個(gè)方面及其上下文，并創(chuàng)建適合于內(nèi)容的設(shè)計(jì)
HTML原生就是響應(yīng)式的（HTML內(nèi)容在視口內(nèi)流式的分布）。隨著CSS的廣泛應(yīng)用，設(shè)計(jì)者創(chuàng)建了許多固定布局的“盒子”并把內(nèi)容強(qiáng)制的放在盒子之中，這有悖于HTML原生響應(yīng)的特性。
過去幾年出現(xiàn)了一場(chǎng)革命，包括自適應(yīng)設(shè)計(jì)，響應(yīng)式設(shè)計(jì)，移動(dòng)優(yōu)先設(shè)計(jì)等。所有這些思想最根本部分就是優(yōu)先考慮內(nèi)容。CSS3也因此定義和實(shí)現(xiàn)一些新的屬性。其中就包括內(nèi)在和外在的寬度（intrinsic and extrinsic width values）。
引入問題我們以一個(gè)常規(guī)的 WEB 頁面設(shè)計(jì)問題（figure 元素內(nèi)的圖片）來引出問題并加以說明。
www.30ke.cn 三十客 - 一個(gè)專注于前端學(xué)習(xí)和分享的網(wǎng)站。
因?yàn)?b>figure是塊級(jí)標(biāo)記，所以元素一直延伸到至整個(gè)容器中。 在以內(nèi)容優(yōu)先的設(shè)計(jì)中，我們通常希望容器 (本例中為 figure元素) 盡可能小。 到目前為止，有幾種方法可以實(shí)現(xiàn)。
figure {
float: left;
}
通過設(shè)置浮動(dòng)，可以實(shí)現(xiàn) figure 元素折疊。但是如果 figure 中的 p （段落）元素寬于圖片寬度，則figure元素會(huì)收縮至最寬的子元素，而不是圖片的寬度。
使用display: inline-block 或 table-cell 同樣有上述問題。
figure {
width: 500px;
}
將 figure 元素寫死一個(gè)寬度，但這使得元素固定并失去響應(yīng)特性。
用 min-width 來幫忙我們最終就是要找到最優(yōu)的圖片容器的寬度以最達(dá)到最好的適應(yīng)內(nèi)部圖片的目的。如果內(nèi)部的文本換行顯示也沒關(guān)系。
我們可以通過 min-content 來達(dá)到目的。盡管該值 2006 年就出現(xiàn)了，但還處在實(shí)驗(yà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)在和外在的寬高系列值中的一個(gè)，其它還包括 max-content ， fit-content等。這些值和 flexbox ，grid 和其它布局系統(tǒng)，使得WEB設(shè)計(jì)更優(yōu)秀更靈活。
min-content 的支持性很好，所有現(xiàn)代主流瀏覽器都支持該值，但是 Internet Explorer and Opera Mini 并不支持。
因此我們借助 max-widht 實(shí)現(xiàn)了回退的方案。
figure {
max-width: 500px;
max-width: min-content;
}
完整的帶回退的顯示方案見如下演示程序：
在線演示程序
本文主要匯編自 Dudley Storey 的一篇博客，并加入了針對(duì)Internet Explorer and Opera Mini 的回退方案。但是因?yàn)楸救怂接邢?，文中難免存在描述不清，代碼不完善等問題，還請(qǐng)大家多多予以批評(píng)指正！
參考文獻(xiàn)CSS Intrinsic & Extrinsic Sizing Module Level 3
Design From the Inside Out With CSS Min-Content
play.csssecrets.io/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113687.html
摘要：到目前為止，有幾種方法可以實(shí)現(xiàn)。通過設(shè)置浮動(dòng)，可以實(shí)現(xiàn)元素折疊。將元素寫死一個(gè)寬度，但這使得元素固定并失去響應(yīng)特性。用來幫忙用來幫忙我們最終就是要找到最優(yōu)的圖片容器的寬度以最達(dá)到最好的適應(yīng)內(nèi)部圖片的目的。前言 設(shè)計(jì)師可以分為如下兩類： 先做好設(shè)計(jì)，然后將內(nèi)容放入靜態(tài)框架中 優(yōu)秀的設(shè)計(jì)師充分考慮內(nèi)容的各個(gè)方面及其上下文，并創(chuàng)建適合于內(nèi)容的設(shè)計(jì) HTML原生就是響應(yīng)式的（HTML內(nèi)容在視口內(nèi)...
摘要：實(shí)際上表示視口寬度的，而不是。同樣，表示視口高度的當(dāng)視口寬度小于高度時(shí)，等于，否則等于?；诘姆椒ㄟ@種應(yīng)該算是最佳的解決辦法實(shí)現(xiàn)方法當(dāng)使用布局時(shí)，使用在水平和垂直方向都會(huì)居中。 1.自適應(yīng)內(nèi)部元素 在css中，不給元素一個(gè)height值時(shí)，元素會(huì)自適應(yīng)其內(nèi)部的元素高度，有時(shí)我們想讓元素的寬度也達(dá)到此效果，應(yīng)用場(chǎng)景如下。 如下當(dāng)前的這種布局，想要改成最外層的div的寬度由當(dāng)前的圖片撐開的...
摘要：簡(jiǎn)單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...
摘要：簡(jiǎn)單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...
摘要：簡(jiǎn)單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。 暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...
閱讀 2917·2021-09-28 09:36
閱讀 4050·2021-09-22 15:52
閱讀 3729·2021-09-06 15:00
閱讀 2018·2021-09-02 15:40
閱讀 2860·2021-09-02 15:15
閱讀 3571·2021-08-17 10:15
閱讀 2839·2019-08-30 15:53
閱讀 2142·2019-08-29 18:39
