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

385 查看

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

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

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

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

下面介绍几个解决方案。

用 JS 来实现

原理是,在元素上设置高度用 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 会根据属性值给元素的对应的间距赋值。

具体实现代码见这里

用 flex 实现

原理和用 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" src="...">

CSS:

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

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