模仿 background-size 款式开辟整屏页面

2019年8月30日 244次阅读 来源: 一波不是一波

我们在做挪动端开辟的时刻常常碰到如许的需求：界面背景要方才幸亏全部屏幕中，不能超越屏幕，而且一定另有一些元素要牢固在界面中某个位置。

比方如许的设想图（720 x 1280 的尺寸），我们不单单议要这个背景不超越屏幕，而且城堡里的图标要不偏不倚地在城堡中的谁人位置。

《模仿 background-size 款式开辟整屏页面》

如许剖析一下我们就知道了我们要处理的题目：

  1. 背景图片不能变形

  2. 元素位置要牢固

平常的要领

如今平常的做法：整张图片当作背景，background-size为100% 100%，页面元素百分比相对定位。

狠狠戳demo

从demo能够看出元素定位的题目用 absolute + 百分比 处理了 ，然则背景变形了（把.wrap的background-size值改成contain尝尝）。为了不让这类变形越发夸大，给.wrap增加了 min-width 和 max-width 。

这个要领还能够优化一下：

  1. 背景图，由于如今背景图都 188kb 了。能够把背景图切成几分铺在底层，demo

  2. logo等相对不能变形的图片就要单独用 img 引入，然后 absolute 定位

假如许可背景图片一点点地变形以及限制尺寸局限，那末运用上面的要领简朴、敏捷，许多状况下也都是这么做的。

本日引见的是一种新要领，背景不会变形且定位正确。

JS 模仿 background-size 开辟整屏页面

近来在做一个新页面的时刻，我不满足于上面的要领，就想看看有无别的处理方法。要图片在容器中不变形的最好方法就是 background-size:contain 了。看看我们如今的希望，这个页面圆满顺应窗口，且不会变形。那怎样让元素定位在不确定 contain 今后宽高未知的背景图上呢？

谁说宽高未知的？在我之前的文章CSS Contain&Cover的数学公式里引见过，之前一向认为没什么用的结论能够在这里用上。

《模仿 background-size 款式开辟整屏页面》

参考上面的文章，我们有了如许的思绪：viewport 在这里就是 window，image 在这里是 .container。然后加上这个结论（contain部份）我们不难过算出背景图在 contain 今后的宽、高。

在之前的基本上，增加盘算背景图宽、高的逻辑：

var $appContainer = $('.app-list'),
     $window = $(window),
    winWidth = $window.width(),
    winHeight = $window.height();
    
var rWindow = winWidth / winHeight,
     rContainer = 720 / 1280,
     scale = 1;
    
if(rWindow<=rContainer){
    var height = winWidth / rContainer;
    $appContainer
        .width(winWidth)
        .height(height)
}else{
    var width = winHeight * rContainer;
    $appContainer
        .height(winHeight)
        .width(width)
}

还要在款式上保证 .app-list 是居中的：

.app-list{
    position: absolute;
    left:50%;
    top:0;
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0);
}

如许就能够看到，不管窗口怎样变化 .app-list 一直和 .container 的背景图贴合在一起：

《模仿 background-size 款式开辟整屏页面》

狠狠戳demo

还剩一个定位题目了，很简朴，这里就只做了两个 icon 的定位。检察完全demo

至此，你能够随便转变窗口的大小，而页面一向都邑保持在整屏中，而且不会变形，个中的元素也能够定位正确，基本上满足了整屏页面的一切题目。

实在，整屏页面就只有两个症结点：背景图片不变形 、页面中元素位置牢固，你只需能做到这两点就能够了。然则，你也能看到我们用上面的方法做出的结果两侧会有高耸的背景显露来

《模仿 background-size 款式开辟整屏页面》

我们白忙活一场么？看下图：

《模仿 background-size 款式开辟整屏页面》

背景 contain 今后不就是这两种状况么？
图1是我们如今的状况，图2是背景的宽高比小于容器的宽高比的状况。能够设想，不管什么样的背景，我们在运用了这类要领后要么显露摆布的背景，要么显露下面的背景。
虽然我们处理了 背景图片不变形和页面中元素位置牢固题目，然则这个题目又在搅扰着我们，所谓『鱼和熊掌不可兼得』。

这里引见的要领实在不是PM们想要的，他们能够想要第一种要领的结果。但实际上是设想图的影响，本文demo的设想图实在不适合这类要领。如今看一个适用于这类要领的demo，这类设想恐怕是第一种要领所不能做到的。

总结

这里只是给人人多一种思绪，详细题目还需要详细看待，不能混为一谈。最少，今后你能够在碰到这类需求的时刻，把本文的图片甩给他，问他要怎样，那这篇文章也没有白写了。

我的博客，迎接定阅

微博粉丝太少，求粉

    原文作者：一波不是一波
    原文地址: https://segmentfault.com/a/1190000004113314
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞