记得在去年双11的互动页面中，我们折腾了一波iPhone8、iPhone8 plus和iPhone X的适配，特别是iPhone X刘海区域的适配。针对这方面的页面适配，沉淀出相应的适配方案。而今年的双11期间，苹果又推出了iPhone XS、iPhone XR和iPhone XR Max以及众多的安卓刘海设备。言外之意，前端在这方面的适配变得越来越复杂。面对众多场景，我们应该怎么去面对呢？接下来聊聊我在今年双11的主互动玩法中是怎么处理的。

如果你和我一样一直在关注CSS Grid布局的话，你应该知道@Rachel Andrew和@Jen Simmons都是CSS Grid 布局的布道师。两位女士一直都在推进Grid的特性和完善相关的特性。这几天看到@Jen Simmons录了一个视频，聊了一下CSS Grid布局相关的误区。

@js_tut的新书《CSS Visual Dictionary》里面的插画非常有意思。他在Medium上把盒模型、Flexbox、Grid三个部分放了一些出来。我觉得他提供的插画非常形象的阐述了这几个部分的知识点。今天把 Flexbox部分的插图直接拿来使用了，通过这些插图再次向大家阐述CSS Flexbox相关的知识。

在过去几年中，CSS布局已经发生了巨大的变化，现在我们开发网站的方式也发生了巨大变化。现在我们有需要可选的CSS布局方式来开发我们的网站，这也就要求我们对这些方式能作出正确而双合适的选择。在这篇文章中，将会介绍各种CSS布局的基本使用方式以及使用的目的。

去年，我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年，我在另一个工作室工作，我学到了一些更令人兴奋的事情，那就是我们都喜欢布局规范。当然，我不会把这些有趣的东西独享。我很高兴能和大家一起分享这些有趣的东西。

有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。事实上真的不完美？其实不然。最近为了新项目中能更完美的使用vw来做移动端的适配。探讨出一种能解决不兼容viewport单位的方案。今天整理一下，与大家一起分享。如果方案中存在一定的缺陷，欢迎大家一起拍正。

之前，我们讲了宽高比盒子，谈到一个技巧，就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的，因为修整一个元素的高度是自找麻烦，但也不是没有这种情况出现。要降低这一风险，有一种方法，那就是伪元素(Psuedo Element)策略，让伪元素顶住其上一层元素，撑起纵横比。但是如果元素里的内容将元素顶得更高，那元素也会变得更高，纵横比就完蛋了。

深入挖掘 CSS Grid 布局规范，发掘一些你可能不知道的特性，并探索即将到来的特性。CSS Grid 布局于 2017 年 3 月 开始被浏览器所支持，在撰写本文时，大多数网站有超过百分之70的访问者有 CSS Grid 特性支持。 这个数据还在快速增长中， 并且在 Edge 浏览器发布更新支持后继续改善。我希望你之前已经有时间去探索过 CSS Grid 布局的一些特性了。 这篇文章将带你探索一些你可能不知道的特性。 并且了解一下未来阶段中可能实现的规范。

就目前为止，CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持，但对于实现布局而言，这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话，那么对于Web的布局将是一种福音。就前面学习的CSS Grid和CSS Flexbox，我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中，已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章，将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。

CSS布局中有一些概念，一旦理解了这些概念，就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文（Block Formatting Context），也就是大家俗称的BFC。你可能从未听说过这个术语，但只要你曾经使用过CSS布局，你就可能知道它是什么。理解BFC是什么，它有什么功能，以及如何创建一个BFC是非常有用的，这些能帮助你更好的理解CSS布局。在这篇文章中，我将会通过几个很熟悉的示例来解释BFC。我还会介绍一个新的display的值，当你理解了BFC是什么的时候，你才能了解为什么需要这个值。也就能更好的理解它的真正意义。