满幅的背景,定宽的内容

 2016-10-08 13:17

在过去的几年间,有一种网页设计手法逐渐流行起来,我们将它称为"宽度满幅,内容宽度固定",这个设计的一些经典特征如下:

  • 页面中包含多个大区块,每个区块都占据了整个视口的宽度,区块的背景也各不相同;

  • 内容是定宽的,即使在不同分辨率下的宽度不一样,也只是因为媒体查询改变了这个固定的宽度值而已。在某些情况下,不同区块也可能具有不同的宽度。

这个最典型的案例就是页脚,要实现这种设计风格,最常见的方法就是为每个区块准备两层元素:外层用来实现满腹的背景,内层用来实现县定宽的内容。这里的内容是测试的,固定的500px的宽度值。

这个最典型的案例就是页脚,要实现这种设计风格,最常见的方法就是为每个区块准备两层元素:外层用来实现满腹的背景,内层用来实现县定宽的内容。后者是通过margin:auto实现水平居中的,它们的代码模式大概是这样的:

<footer>
    <div class="wrapper">
        <!-- 页脚的内容写在这里 -->
    </div>
</footer>

同时用CSS来设置两层元素的样式:

footer{
    background:#333;
}
.wrapper{
    max-width:900px;
    margin:1em auto;
}

难道为了这个效果就一定要添加一层额外的元素?我们能否在现在CSS帮助下彻底抛弃这个累赘呢?

我们先来想一想,margin:auto实在这个场景下到底发挥了什么作用。这条声明所产生的左右外边距实际上都等于视口宽度的一般减去内容宽度的一半。由于百分比在这里是基于视口宽度来解析的,我们可以把这个外边距的值表达为50%-450px。

实际上,CSS值与单位(第三版)定义了一个calc()函数,它允许我们在CSS中直接以这种简单的算式来指定属性的值。如果用calc()取代原先的auto,这个内容器的样式就会变成:

.wrapper{
    max-width:900px;
    margin:1em calc(50% - 450px);
}

之所以要在页脚加一层容器元素,唯一的原因就是为了给它的margin指定神奇的auto关键字,从而实现内容的水平居中布局。不过,我们现在已经实现了用calc()取代原先的auto,而且这个新值实际上可以作为一个通用的CSS长度值应用到任何一个接受长度值的属性上。这意味着如果我们愿意,还可以把这个长度值应用到父元素的padding上,而整个效果是保持不变的:

footer{
    background:#333;
    max-width:900px;
    padding:1em calc(50% - 450px);
}

终于,我们有了一个纯净的HTML结构,如果把width这一行声明注释掉,你会发现其实没有影响。视觉效果是完全一样的,而且不论视口尺寸如何变化都是如此。这是为什么呢?

因为当内边距是50%-450px时,只可能给内容留出900px(2*450px)的可用空间。只有把width显示设置为900px之外的其他值,我们才可以看出区别。所以,我们可以把这行去掉了。

另外一个有优化的方面在于,为了考虑兼容性,我们可以增加一条回退样式来增强向后兼容性。这样即使浏览器不支持calc(),我们也至少可能得到一个合理的内边距:

footer{
    background:#333;
    padding:1em;
    padding:1em calc(50% - 450px);
}


作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: