前，我们讲了纵横比方框，谈到一个技巧，就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的，因为修整一个元素的高度是自找麻烦，但也不是没有这种情况出现。

要降低这一风险，有一种方法，那就是伪元素(Psuedo Element)策略，让伪元素顶住其上一层元素，撑起纵横比。但是如果元素里的内容将元素顶得更高，那元素也会变得更高，纵横比就完蛋了。

这一技巧可以在CSS网格布局中，应用到网格项目上去！当然，应用的方法有几种，都值得我们思考。

记住，网格区域和占据区域的元素并不一定大小一致

这一点我们刚讲过。 那篇文章一开始是想写成这篇文章的一部分的，不过后来感觉这个概念还是挺重要的，应该分开写。

知道了这一点，就引申出两个问题：是需要网格区域本身有个纵横比，然后里面的元素跟着拉伸？还是不管元素所在的网格区域如何，仅元素需要纵横比？

情形1) 只是内部的元素需要设纵横比。

好，这个可能比较容易一些。 只要保证元素的宽度和网格区域的宽度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)));
}

结果就是这样：

注意，应用纵横比并不一定要通过自定义属性。可以看到，这里的脏活累活都是由底部填充(padding-bottom)这条规则完成的，它的值也可以直接用固定值或别的什么。

情形2) 跨列求宽

我觉得，其实大家想要的更可能是这样的效果，就是设一个2:1的纵横比，然后元素就能确确实实地跨两列，而不是局限在一列里。做法和上面的差不多，但要加规则来实现跨列。

[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;规则，我们还可以让不同网格项目有不同的纵横比，它们可以整齐地相互包围，显得很协调。

推荐下我的前端群：589651705，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括我自己整理的一份前端资料和零基础入门教程，欢迎初学者和在进阶中的小伙伴。

到了这里，就该讲讲哪些做法会把准确的纵横比搞砸。有些文字的行高line-height属性可能会把方框顶得过高；要用网格间距grid-gap这个属性也可能会弄乱纵横比。如果纵横比例要求一定超准，可能就要多试几个固定值，碰运气了。

如果网格本身没有固定数量的行，做跨列也会变得比较麻烦。大家做的可能是重复函数repeat加自动填充auto-fill的效果，这样最后遇到的情况可能是有几个列不相等，那它们的纵横比也好不到哪里去。这个问题也许下次我们再来深入研究一下。

情形 3) 硬来

网格有能力进行二维布局。真想做的话，只要强迫网格区域高和宽符合纵横比就可以了。比如，给列和行直接设定固定的值，这种做法也不是不行：

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

我们一般不会考虑这种方法，因为都希望元素大小灵活易变，正是由于这个原因，上面的纵横比例子里用的技术都是基于百分比的。但是固定值仍然不失为另一种选择。

看看Pen网站CodePen上纵横比方框填充这个例子，作者Chris Coyier。

这个例子强迫网格区域大小固定，然后让其中的元素拉伸填充这个区域，不过我们大可把元素的大小也固定下来。

实际应用的例子

Ben Goshow留言说要完成这个例子，于是促成了现在这个效果：

这个问题一部分在于不但要给方框加上纵横比，还要在方框内实现对齐功能。有几种方法可以实现，但我认为最简单的方法是网格套网格。给网格元素加上display: grid;规则，然后利用那个内部网格的对齐功能来实现。

推荐下我的前端群：589651705，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括我自己整理的一份前端资料和零基础入门教程，欢迎初学者和在进阶中的小伙伴。

原文作者：chaussen

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

们平时看到的各式各样的网站都是用网页来组成的，网页是参与排名的最小单位，网页又是由多个html标签代码来组成，浏览器就是把网页代码转换成可识化网页来供用户浏览相看的。那么，我们的网站要想有好的排名当然就要从html优化做起，做html优化要注意哪些呢？

1、代码要清析整洁，做好开始与闭合标签。

2、合理使用H标签，H1用来作网页正文标题，一个网页只可出现一个H1标签，H2、H3可出现多次。

3、图片要加alt标签，便于搜索引擎的识别，还要加上图片的长宽值，便于图片的打开速度。

4、网页代码中尽量少加入JS，否则会影响网页的打开速度。

5、如果网页中有太多的图片，JS，视频等附件，要放在特定的储存服务器中，以来保证网页的打开速度。

一个网页打开速度超过3秒就会增加用户的跳出率，所以大家在做html优化时一定要注意到以上五点。网页HTML优化注意事项。

　一、 弹性布局(100%布局)的特点

　　顶部与底部的bar不管分辨率怎么变，它的?度和位置都不变; 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息 都位于条目的左边，薪资都位于右边.

　　特点：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放

　　二、什么是屏幕尺寸?

　　移动端屏幕尺寸:屏幕对角线的长度，单位是英寸(1英寸=2.54厘米)。

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

　　三、什么是屏幕分辨率?

　　屏幕分辨率：指横纵方向上的像素点数，单位为px,1px=1个像素点。

　　一般以纵向像素*横向像素表示 一个手机的屏幕分辨率。如：1960*1080

　　这里的一个像素是指物理设备的一个像素点。

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

　　屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi(pixels per inch)缩写。

　　屏幕像素密度与屏幕尺寸，屏幕分辨率有关，在单一条件下，屏幕尺寸越小，分辨率越高，像素密度越大，反之越小。

　　iphone3GS和iphone4区别：屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。

　　PX:像素，将显示器分成非常细小的方格，每一个方格就是1px。

　　注:(网页重构中使用的px 和屏幕分辨率的px不一定是一样的大小)。

　　实际上像素分为两种：设备像素和逻辑像素( CSS像素)

　　DPR：设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值

　　在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是DPR=2

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

　　1.rem是什么?

　　rem(font size of the root element)是指相对于根元素的字体大小的单位。

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

　　实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化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.根元素

　　如果根元素是相对设备尺寸自动变换。

　　3.VW

　　视窗宽度，1vw等于视窗宽度的1%。

　　4.VW转换成PX赋值给font-size

　　例：设备的分辨率为640*1136，逻辑像素为320*568 1VW=3.2px

　　Font-size:100px;转换成VW font-size:31.25vw;

　　1rem=31.25vw可一起结合写等比例缩放布局。

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

　　实现方案：采用PX方式，借助弹性盒实现。

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

　　1.html{font-size:31.25vw(可变:设计稿);}

　　31.25vw=100px(50px或100px为基准单位(好算))/3.2px

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

　　元素大小(rem)=原图量尺寸/dpr/100(50px、100px为基准单位(好算))

　　2，用媒体查询设置html的font-size配合rem(设置判断条件的节点)

　　3, 通过JS动态设置html的font-size同样元素单位也要配合rem实现等比例缩放布局。