让内容恰好占一屏，适配各种尺寸的设备的实现

有时候我们会有让内容恰好占一屏，并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意，直接谈如何实现。

我们会第一个想到的可能是，页面内所有块级元素的宽度，高度，边距值(margin,padding)都用百分数呗。
在水平方向，宽度，水平方向的间距值如果为百分数的值，其值是相对于其父元素的宽度来计算的，可以实现水平方向适配不同尺寸的设备。
在垂直方向，高度值如果为百分数，其值是相对于父元素的高度来计算的。但垂直方向的间距值如果为百分数的话，其值是相对与父元素宽度（而非高度）来计算的，呵呵（无奈~~~）。

因此，水平方向我们可以用百分数的方案来做适配。垂直方向需要其他方案。

我们能不能用 CSS3 的 Media Queries 呢？做不到。虽然 Media Queries 支持对设备高度的查询，但我们不可能列举所有设备的高度，为每种不同高度的设备写一套 CSS 吧。如果只需兼容几种高度的设备，可以考虑这个方案。

下面介绍几个解决方案。

原理是，在元素上设置高度用 data-style-height 属性，其值为在父元素高度中占的份数。页面初始化时，JS 会根据该值，父元素的高度，父元素的高度的总份数，给该元素的高度赋值。如

<div>
  <div id="a" data-style-height="1"></div>
  <div id="b" data-style-height="2"></div>
</div>

在上面代码中，父元素的高度的总份数为 3，a 的高度占 1 份，b 的高度 占 2 份。假设父元素的高度是 100px， 那么 a 的高度为 (1 / 3 * 100)px，b 的高度为 (2 / 3 * 100)px。

同样的，设置间距用这些属性： data-style-margin-top, data-style-margin-bottom, data-style-padding-top, data-style-padding-bottom。页面初始化时，JS 会根据属性值给元素的对应的间距赋值。

具体实现代码见这里。

原理和用 JS 实现基本一致。用 flex 实现只是用 flex-grow 的值大于 0 的 flex 元素在父空间很大时，会自动变大的特性来代替 JS 的计算。

具体的原理是，在元素上设置高度用 data-style-height 属性，其父元素设置样式 display:flex;flex-direction: column;。页面初始化时，JS 会根据该值给该元素设置 flex-grow:属性值。间距用带 data-style-height 属性并且元素内容为空的元素来实现。

具体实现代码见这里。

如果内容不需要交互，可以将整个页面做成一张图片来实现。当然，这样做后期维护会比较坑爹。

HTML:

<img class="fullpage" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="...">

CSS:

html,body{
  height: 100%;
}
.fullpage{
  width: 100%;
  height: 100%;
}

本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。