容器布局及设备自适应

在前面学习“子页面容器类型”的时候，那里只有高度属性而没有宽度属性。这是因为，页面中可见的只能是面板之类的容器，而这些容器默认都是自动填满屏幕宽度的。为什么要这样设计？最根本的目的，是为了让它能自适应不同设备的屏幕显示。

仍以之前搭建的“测试页面”为例，在这个页面中，我们虽然用到了卡片面板、常规容器和微展示3种容器，但真正在页面中显示出来的只有第1个卡片面板和第3个微展示。在PC端，此页面可以正常显示，如之前的各种截图；那么，移动端显示效果如何？我们不妨打开浏览器的控制台，让它模仿各种移动设备来看看效果。

以下是iPhone 6/7/8 Plus手机端的竖屏显示效果。由于该手机宽度较小，所有容器都会顺序显示：

但如果换成iPhone X的横屏，由于其宽度足够，这样的效果已经和PC端没什么区别：

虽然页面在总体上可以自适应各种设备，但具体到子页面内容而言，仍然有很明显的比较遗憾的地方：所有容器都自动填满屏幕的宽度，当内容太单薄时，可能会显的很不协调。如上图，iPhone X横屏显示时的屏幕宽度已经比较大了，还有必要让容器都这么宽么？可不可以根据不同的设备，让它显示的更漂亮、更加紧凑一些？

当然可以，这就需要用到栅格了！