让内容恰好占一屏,适配各个尺寸的配备的兑现

奇迹大家会有让内容恰好占一屏,并且适配各样尺寸的配备的需求。大家先不谈这样做会促成在部分装备上的来得差强人意,间接谈如何促成。

俺们会首先个想到的恐怕是,页面内存有块级元素的肥瘦,中度,边距值(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协商

网络平台如需转载必须与自家联系确认。