前，我們講了縱橫比方框，談到一個技巧，就是運用填充來隨心所欲地調(diào)整一個元素的長寬比例。這個技巧并不是經(jīng)常能用到的，因為修整一個元素的高度是自找麻煩，但也不是沒有這種情況出現(xiàn)。

要降低這一風險，有一種方法，那就是偽元素(Psuedo Element)策略，讓偽元素頂住其上一層元素，撐起縱橫比。但是如果元素里的內(nèi)容將元素頂?shù)酶撸窃匾矔兊酶撸v橫比就完蛋了。

這一技巧可以在CSS網(wǎng)格布局中，應(yīng)用到網(wǎng)格項目上去！當然，應(yīng)用的方法有幾種，都值得我們思考。

記住，網(wǎng)格區(qū)域和占據(jù)區(qū)域的元素并不一定大小一致

這一點我們剛講過。 那篇文章一開始是想寫成這篇文章的一部分的，不過后來感覺這個概念還是挺重要的，應(yīng)該分開寫。

知道了這一點，就引申出兩個問題：是需要網(wǎng)格區(qū)域本身有個縱橫比，然后里面的元素跟著拉伸？還是不管元素所在的網(wǎng)格區(qū)域如何，僅元素需要縱橫比？

情形1) 只是內(nèi)部的元素需要設(shè)縱橫比。

好，這個可能比較容易一些。 只要保證元素的寬度和網(wǎng)格區(qū)域的寬度100%相同，然后加上偽元素來處理拉伸高度的縱橫比。

<div class="grid">
 <div style="--aspect-ratio: 2/1;">2/1</div>
 <div style="--aspect-ratio: 3/1;">3/1</div>
 <div style="--aspect-ratio: 1/1;">1/1</div>
</div>

.grid {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 place-items: start;
}
.grid > * {
 background: orange;
 width: 100%;
}
.grid > [style^='--aspect-ratio']::before {
 content: "";
 display: inline-block;
 width: 1px;
 height: 0;
 padding-bottom: calc(100% / (var(--aspect-ratio)));
}

結(jié)果就是這樣：

注意，應(yīng)用縱橫比并不一定要通過自定義屬性。可以看到，這里的臟活累活都是由底部填充(padding-bottom)這條規(guī)則完成的，它的值也可以直接用固定值或別的什么。

情形2) 跨列求寬

我覺得，其實大家想要的更可能是這樣的效果，就是設(shè)一個2:1的縱橫比，然后元素就能確確實實地跨兩列，而不是局限在一列里。做法和上面的差不多，但要加規(guī)則來實現(xiàn)跨列。

[style="--aspect-ratio: 1/1;"] {
 grid-column: span 1;
}
[style="--aspect-ratio: 2/1;"] {
 grid-column: span 2;
}
[style="--aspect-ratio: 3/1;"] {
 grid-column: span 3;
}

如果再加進一條grid-auto-flow: dense;規(guī)則，我們還可以讓不同網(wǎng)格項目有不同的縱橫比，它們可以整齊地相互包圍，顯得很協(xié)調(diào)。

推薦下我的前端群：589651705，不管你是小白還是大牛，小編我都歡迎，不定期分享干貨，包括我自己整理的一份前端資料和零基礎(chǔ)入門教程，歡迎初學者和在進階中的小伙伴。

到了這里，就該講講哪些做法會把準確的縱橫比搞砸。有些文字的行高line-height屬性可能會把方框頂?shù)眠^高；要用網(wǎng)格間距grid-gap這個屬性也可能會弄亂縱橫比。如果縱橫比例要求一定超準，可能就要多試幾個固定值，碰運氣了。

如果網(wǎng)格本身沒有固定數(shù)量的行，做跨列也會變得比較麻煩。大家做的可能是重復函數(shù)repeat加自動填充auto-fill的效果，這樣最后遇到的情況可能是有幾個列不相等，那它們的縱橫比也好不到哪里去。這個問題也許下次我們再來深入研究一下。

情形 3) 硬來

網(wǎng)格有能力進行二維布局。真想做的話，只要強迫網(wǎng)格區(qū)域高和寬符合縱橫比就可以了。比如，給列和行直接設(shè)定固定的值，這種做法也不是不行：

.grid {
 display: grid;
 grid-template-columns: 200px 100px 100px;
 grid-template-rows: 100px 200px 300px;
}

我們一般不會考慮這種方法，因為都希望元素大小靈活易變，正是由于這個原因，上面的縱橫比例子里用的技術(shù)都是基于百分比的。但是固定值仍然不失為另一種選擇。

看看Pen網(wǎng)站CodePen上縱橫比方框填充這個例子，作者Chris Coyier。

這個例子強迫網(wǎng)格區(qū)域大小固定，然后讓其中的元素拉伸填充這個區(qū)域，不過我們大可把元素的大小也固定下來。

實際應(yīng)用的例子

Ben Goshow留言說要完成這個例子，于是促成了現(xiàn)在這個效果：

這個問題一部分在于不但要給方框加上縱橫比，還要在方框內(nèi)實現(xiàn)對齊功能。有幾種方法可以實現(xiàn)，但我認為最簡單的方法是網(wǎng)格套網(wǎng)格。給網(wǎng)格元素加上display: grid;規(guī)則，然后利用那個內(nèi)部網(wǎng)格的對齊功能來實現(xiàn)。

推薦下我的前端群：589651705，不管你是小白還是大牛，小編我都歡迎，不定期分享干貨，包括我自己整理的一份前端資料和零基礎(chǔ)入門教程，歡迎初學者和在進階中的小伙伴。

原文作者：chaussen

原文地址：http://www.zcfy.cc/article/aspect-ratios-for-grid-items-css-tricks-4585.html

們平時看到的各式各樣的網(wǎng)站都是用網(wǎng)頁來組成的，網(wǎng)頁是參與排名的最小單位，網(wǎng)頁又是由多個html標簽代碼來組成，瀏覽器就是把網(wǎng)頁代碼轉(zhuǎn)換成可識化網(wǎng)頁來供用戶瀏覽相看的。那么，我們的網(wǎng)站要想有好的排名當然就要從html優(yōu)化做起，做html優(yōu)化要注意哪些呢？

1、代碼要清析整潔，做好開始與閉合標簽。

2、合理使用H標簽，H1用來作網(wǎng)頁正文標題，一個網(wǎng)頁只可出現(xiàn)一個H1標簽，H2、H3可出現(xiàn)多次。

3、圖片要加alt標簽，便于搜索引擎的識別，還要加上圖片的長寬值，便于圖片的打開速度。

4、網(wǎng)頁代碼中盡量少加入JS，否則會影響網(wǎng)頁的打開速度。

5、如果網(wǎng)頁中有太多的圖片，JS，視頻等附件，要放在特定的儲存服務(wù)器中，以來保證網(wǎng)頁的打開速度。

一個網(wǎng)頁打開速度超過3秒就會增加用戶的跳出率，所以大家在做html優(yōu)化時一定要注意到以上五點。網(wǎng)頁HTML優(yōu)化注意事項。

　一、 彈性布局(100%布局)的特點

　　頂部與底部的bar不管分辨率怎么變，它的?度和位置都不變; 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標等信息 都位于條目的左邊，薪資都位于右邊.

　　特點：關(guān)鍵元素高寬和位置都不變，只有容器元素在做伸縮變換。對于這類app，記住一個開發(fā)原則就好：文字流式，控件彈性，圖片等比縮放

　　二、什么是屏幕尺寸?

　　移動端屏幕尺寸:屏幕對角線的長度，單位是英寸(1英寸=2.54厘米)。

　　常見的尺寸有：2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0

　　三、什么是屏幕分辨率?

　　屏幕分辨率：指橫縱方向上的像素點數(shù)，單位為px,1px=1個像素點。

　　一般以縱向像素*橫向像素表示 一個手機的屏幕分辨率。如：1960*1080

　　這里的一個像素是指物理設(shè)備的一個像素點。

　　四、什么是屏幕像素密度?

　　屏幕像素密度：屏幕上每英寸可以顯示像素點的數(shù)量，單位是ppi(pixels per inch)縮寫。

　　屏幕像素密度與屏幕尺寸，屏幕分辨率有關(guān)，在單一條件下，屏幕尺寸越小，分辨率越高，像素密度越大，反之越小。

　　iphone3GS和iphone4區(qū)別：屏幕尺寸一樣，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。

　　PX:像素，將顯示器分成非常細小的方格，每一個方格就是1px。

　　注:(網(wǎng)頁重構(gòu)中使用的px 和屏幕分辨率的px不一定是一樣的大小)。

　　實際上像素分為兩種：設(shè)備像素和邏輯像素( CSS像素)

　　DPR：設(shè)備像素比DPR(devicePixelRatio)是默認縮放為100%的情況下，設(shè)備像素和CSS像素的比值

　　在早先的移動設(shè)備中，并沒有DPR的概念。隨著技術(shù)的發(fā)展，移動設(shè)備的屏幕像素密度越來越高。從iphone4開始蘋果公司推出了所謂的retina視網(wǎng)膜屏幕。之所以叫做視網(wǎng)膜屏幕，是因為屏幕的PPI(屏幕像素密度)太高，人的視網(wǎng)膜無法分辨出屏幕上的像素點。iphone4的分辨率提高了一倍，但屏幕尺寸卻沒有變化，這意味著同樣大小的屏幕上，像素多了一倍，于是DPR=2

　　五、等比縮放布局(rem布局)

　　1.rem是什么?

　　rem(font size of the root element)是指相對于根元素的字體大小的單位。

　　2.為什么web app要使用rem?

　　實現(xiàn)強大的屏幕適配布局(淘寶,騰訊,網(wǎng)易等網(wǎng)站都是rem布局適配)rem能等比例適配所有屏幕,根據(jù)變化html的字體大小來控制rem的大小,

　　六、vw vh

　　vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。

　　vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。

　　vmin：vw和vh中較小的那個。

　　vmax：vw和vh中較大的那個。

　　vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持

　　七、Rem配合VW做等比縮放布局

　　1.rem

　　rem是指相對于根元素的字體大小的單位。

　　2.根元素

　　如果根元素是相對設(shè)備尺寸自動變換。

　　3.VW

　　視窗寬度，1vw等于視窗寬度的1%。

　　4.VW轉(zhuǎn)換成PX賦值給font-size

　　例：設(shè)備的分辨率為640*1136，邏輯像素為320*568 1VW=3.2px

　　Font-size:100px;轉(zhuǎn)換成VW font-size:31.25vw;

　　1rem=31.25vw可一起結(jié)合寫等比例縮放布局。

　　八、100%布局(彈性布局)

　　實現(xiàn)方案：采用PX方式，借助彈性盒實現(xiàn)。

　　九、等比例縮放布局(rem布局)

　　1.html{font-size:31.25vw(可變:設(shè)計稿);}

　　31.25vw=100px(50px或100px為基準單位(好算))/3.2px

　　3.2px=320(視口寬度)/100(1vw等于視窗寬度的1%。)

　　元素大小(rem)=原圖量尺寸/dpr/100(50px、100px為基準單位(好算))

　　2，用媒體查詢設(shè)置html的font-size配合rem(設(shè)置判斷條件的節(jié)點)

　　3, 通過JS動態(tài)設(shè)置html的font-size同樣元素單位也要配合rem實現(xiàn)等比例縮放布局。