CSS - 你实现过宽高自适应的正方形吗

难度

难度级别：中高级及以上                               提问概率：80% 

---

宽高自适应的需求并不少见，尤其是在当今流行的大屏系统开发中更是随处可见，很显然已经超越了我们日常将div写死100px这样的范畴，那么如何实现一个宽高自适应的正方形呢？这里提出两种实现方案。

一种方案是不设定高度，设定padding-top值与宽度值相同的方式，将div撑开，但需要注意的是，元素的padding值如果是百分比的话，基值是父元素的宽度，代码如下

HTML代码：
<div class="box">
<div class="box-inner"></div>
</div>
CSS代码：
<style>
.box {
width: 200px;
height: 200px;
}
.box-inner {
width: 20%;
height: 0;
border: 1px solid red;
padding-top: 20%;
}
</style>

 另一种方案是使用vw来适应浏览器宽度，代码如下

HTML代码：
<div class="box"></div>
CSS代码：
<style>
.box {
width: 10vw;
height: 10vw;
border: 1px solid red;
}
</style>

既然说到了正方形的自适应，那么延伸一下，很多求职者也一定遇到过px、em、rem、vw这些渲染单位的考题，大家比较熟知的单位px、%、em等，而CSS3又支持了更多的渲染单位，比如rem、vw等，那么这些渲染单位有什么区别呢？

px是一种绝对单位，它表示显示器上的每一个像素点，如果电脑分辨率是1024*768的电脑，在浏览器全屏的情况下，100px可以占到浏览器宽度的十分之一，但如果是1920*1080的电脑，100px看上去长度就小很多了。

rem是一种相对单位，但它并不是一个纯粹的相对单位，因为它的基值是HTML元素的font-size值，我们知道浏览器默认字体大小是16px，所以为了方便使用，我们常常在为html元素设置 html{font-size:62.5%;}，这样如果在业务代码里写1rem就相当于10px，1.8rem就相当于18px了，这样计算还是比较方便的。但rem相对的是html根元素的font-size值，所以如果需要使用rem进行自适应，就需要在页面初始化和窗口大小改变的时候，计算浏览器的宽度，从而改变html根元素的font-size值。

vw也是一种相对单位，它相对于浏览器窗口的宽度，这个单位在自适应方面改进还是很大的，而无需设置html根元素的font-size值，也不需要计算浏览器的宽度。但很多初学者容易将其与%混淆，%的自适应基值是其父元素。

那么如果再扩展一下，是否可以说一说响应式布局的缺点呢？如果说想要用同一套代码，实现手机、平台和PC电脑的相适应布局，那么媒体查询无疑是一种最佳方案。媒体查询更像是使用了if判断语句，根据浏览器窗口宽度来决定加载哪些CSS内容，再辅助以vw、%、flex布局等方式，使响应式布局这项工作得以顺利完成。但不得不说，这种实现方式只能算作是一种折中的方案，因为各手机厂商采用的分辨率丰富多样，总会有那么几种机型会出现阈值情况，如果想要完美适应，就需要写出更多的判断代码；既然需要写出更多的判断代码，那么很明显，对于一类用户来说，将会有大量累赘的代码和静态资源被无效加载，而自己使用的只是其中一小部分；久而久之，代码量过大，项目维护成本将会增高；不够还有一个更重要的缺点，响应式布局更适用于相对来说比较简单的网页，如果网页元素复杂，需求丰富，还是尽量分设备开发吧。

---

刷题思考

    有的人做过需要自适应的大型项目，而有的人经验较少，只做过一小部分自适应的需求。前端开发无论初级还是高级，自适应这个话题是谁也无法避免的。所以这道题，不管是初级开发还是高级开发，考察的频次都会特别高。

    这类题目不仅会考察基础知识点，而且还会从一个简单的问题入手，层层深入，考查知识点在项目中的应用，有些面试官还会希望求职者说出自己的理解。所以想要回答好这类题目，工作经验的确是很重要的。

---

类似考点

    这道题考察的是自适应相关的知识及使用，面试官还可能会问，例如请你说一下em和rem的区别；例如你做过移动端H5页的响应式吗？例如当前团队已有一套PC端网站，想要快速实现一套功能相同的H5网站，你该如何去做？