模擬 background-size 樣式開發整屏頁面

int64 發布于2019-08-19 17:10 / 861人閱讀

摘要：我們在做移動端開發的時候經常遇到這樣的需求界面背景要剛剛好在整個屏幕中，不能超出屏幕，而且肯定還有一些元素要固定在界面中某個位置。模擬開發整屏頁面最近在做一個新頁面的時候，我不滿足于上面的方法，就想看看有沒有別的解決辦法。

我們在做移動端開發的時候經常遇到這樣的需求：界面背景要剛剛好在整個屏幕中，不能超出屏幕，而且肯定還有一些元素要固定在界面中某個位置。

比如這樣的設計圖（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 頁面樣式性模擬信號開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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