模拟 background-size 样式开发整屏页面

int64 发布于2019-08-19 17:10 / 817人阅读

摘要：我们在做移动端开发的时候经常遇到这样的需求界面背景要刚刚好在整个屏幕中，不能超出屏幕，而且肯定还有一些元素要固定在界面中某个位置。模拟开发整屏页面最近在做一个新页面的时候，我不满足于上面的方法，就想看看有没有别的解决办法。

我们在做移动端开发的时候经常遇到这样的需求：界面背景要刚刚好在整个屏幕中，不能超出屏幕，而且肯定还有一些元素要固定在界面中某个位置。

比如这样的设计图（720 x 1280 的尺寸），我们不仅仅要这个背景不超出屏幕，而且城堡里的图标要不偏不倚地在城堡中的那个位置。

这样分析一下我们就知道了我们要解决的问题：

背景图片不能变形

元素位置要固定

一般的方法

现在一般的做法：整张图片当做背景，background-size为100% 100%，页面元素百分比绝对定位。

狠狠戳demo

从demo可以看出元素定位的问题用 absolute + 百分比 解决了，但是背景变形了（把.wrap的background-size值改成contain试试）。为了不让这种变形更加夸张，给.wrap添加了 min-width 和 max-width 。

这个方法还可以优化一下：

背景图，因为现在背景图都 188kb 了。可以把背景图切成几分铺在底层，demo

logo等绝对不能变形的图片就要多带带用 img 引入，然后 absolute 定位

如果允许背景图片一点点地变形以及限定尺寸范围，那么使用上面的方法简单、迅速，很多情况下也都是这么做的。

今天介绍的是一种新方法，背景不会变形且定位准确。

JS 模拟 background-size 开发整屏页面

最近在做一个新页面的时候，我不满足于上面的方法，就想看看有没有别的解决办法。要图片在容器中不变形的最好办法就是 background-size:contain 了。看看我们现在的进展，这个页面完美适应窗口，且不会变形。那怎么让元素定位在不确定 contain 以后宽高未知的背景图上呢？

谁说宽高未知的？在我之前的文章CSS Contain&Cover的数学公式里介绍过，之前一直以为没什么用的结论可以在这里用上。

参考上面的文章，我们有了这样的思路：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 的背景图贴合在一起：

狠狠戳demo

还剩一个定位问题了，很简单，这里就只做了两个 icon 的定位。查看完整demo

至此，你可以随意改变窗口的大小，而页面一直都会保持在整屏中，而且不会变形，其中的元素也可以定位准确，基本上满足了整屏页面的所有问题。

其实，整屏页面就只有两个关键点：背景图片不变形、页面中元素位置固定，你只要能做到这两点就可以了。但是，你也能看到我们用上面的办法做出的效果两侧会有突兀的背景露出来

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

背景 contain 以后不就是这两种情况么？
图1是我们现在的情况，图2是背景的宽高比小于容器的宽高比的情况。可以想象，无论什么样的背景，我们在使用了这种方法后要么露出左右的背景，要么露出下面的背景。
虽然我们解决了 背景图片不变形和页面中元素位置固定问题，但是这个问题又在困扰着我们，所谓『鱼和熊掌不可兼得』。

这里介绍的方法其实不是PM们想要的，他们可能想要第一种方法的效果。但其实是设计图的影响，本文demo的设计图其实不适合这种方法。现在看一个适用于这种方法的demo，这种设计恐怕是第一种方法所不能做到的。

总结

这里只是给大家多一种思路，具体问题还需要具体对待，不能一概而论。至少，以后你可以在遇到这种需求的时候，把本文的图片甩给他，问他要怎么样，那这篇文章也没有白写了。

我的博客，欢迎订阅

微博粉丝太少，求粉

云服务器 GPU云服务器页面样式页面css样式 html 页面样式性模拟信号开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78267.html

使用Slip.js快速创建整屏滑动的手机网页

摘要：解说暴露到全局的方法，只要你引入，就可以得到这个实用牛逼的方法。设置页面展现为全屏滑动页面的方法。至此，一个全屏滑动网页就完成了，难以想象的简单快速。注意页数是从开始的，所以上面的最后一页是，而不是。如果想迫切试用，可以直接查看文档。现在滑屏网页越来越多，比如我在搜狐视频就做了好几个，举个例子，可以用手机扫描以下的二维码访问： showImg(http://qianbao.baid...

lucas 2019-08-21 12:31 评论0 收藏0
如何写一个整屏滑动的移动页面

摘要：国庆前几天花了点时间写一个整屏滑动的移动页面的，时间短暂还有很多东西没写。其中碰到的坑是的时间通过无法阻挡默认事件，只能，但是电脑上模拟移动页面可以使用国庆前几天花了点时间写一个整屏滑动的移动页面的demo，时间短暂还有很多东西没写。跟基友 http://segmentfault.com/blog/laopopo/1190000000708417 差不多，但思路上不太一样，大家可...

hot_pot_Leo 2019-08-21 12:31 评论0 收藏0
移动端开发（使用webuploader上传图片,客户端交互,修改alert弹窗等）

摘要：之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示即与客户端有交互遇到不少的坑总结一下问题图片上传功能使用工具百度的暂时遇到的坑删除图片实际上并没有完全删除需要自己在源码上添加详情看的提问上传的图片旋转角度有问题比之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示(即与客户端有交互）遇到不少的坑总结一下问题 1.图片上传功能 ...

李昌杰 2019-08-19 17:26 评论0 收藏0
移动端web app自适应布局探索与总结

摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

Benedict Evans 2019-08-21 10:44 评论0 收藏0
移动端web app自适应布局探索与总结

摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

wangjuntytl 2019-08-28 18:21 评论0 收藏0