成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

模擬 background-size 樣式開發(fā)整屏頁面

int64 / 867人閱讀

摘要：我們在做移動(dòng)端開發(fā)的時(shí)候經(jīng)常遇到這樣的需求界面背景要?jiǎng)倓偤迷谡麄€(gè)屏幕中，不能超出屏幕，而且肯定還有一些元素要固定在界面中某個(gè)位置。模擬開發(fā)整屏頁面最近在做一個(gè)新頁面的時(shí)候，我不滿足于上面的方法，就想看看有沒有別的解決辦法。

我們在做移動(dòng)端開發(fā)的時(shí)候經(jīng)常遇到這樣的需求：界面背景要?jiǎng)倓偤迷谡麄€(gè)屏幕中，不能超出屏幕，而且肯定還有一些元素要固定在界面中某個(gè)位置。

比如這樣的設(shè)計(jì)圖（720 x 1280 的尺寸），我們不僅僅要這個(gè)背景不超出屏幕，而且城堡里的圖標(biāo)要不偏不倚地在城堡中的那個(gè)位置。

這樣分析一下我們就知道了我們要解決的問題：

背景圖片不能變形

元素位置要固定

一般的方法

現(xiàn)在一般的做法：整張圖片當(dāng)做背景，background-size為100% 100%，頁面元素百分比絕對定位。

狠狠戳demo

從demo可以看出元素定位的問題用 absolute + 百分比 解決了 ，但是背景變形了（把.wrap的background-size值改成contain試試）。為了不讓這種變形更加夸張，給.wrap添加了 min-width 和 max-width 。

這個(gè)方法還可以優(yōu)化一下：

背景圖，因?yàn)楝F(xiàn)在背景圖都 188kb 了?？梢园驯尘皥D切成幾分鋪在底層，demo

logo等絕對不能變形的圖片就要多帶帶用 img 引入，然后 absolute 定位

如果允許背景圖片一點(diǎn)點(diǎn)地變形以及限定尺寸范圍，那么使用上面的方法簡單、迅速，很多情況下也都是這么做的。

今天介紹的是一種新方法，背景不會(huì)變形且定位準(zhǔn)確。

JS 模擬 background-size 開發(fā)整屏頁面

最近在做一個(gè)新頁面的時(shí)候，我不滿足于上面的方法，就想看看有沒有別的解決辦法。要圖片在容器中不變形的最好辦法就是 background-size:contain 了。看看我們現(xiàn)在的進(jìn)展，這個(gè)頁面完美適應(yīng)窗口，且不會(huì)變形。那怎么讓元素定位在不確定 contain 以后寬高未知的背景圖上呢？

誰說寬高未知的？在我之前的文章CSS Contain&Cover的數(shù)學(xué)公式里介紹過，之前一直以為沒什么用的結(jié)論可以在這里用上。

參考上面的文章，我們有了這樣的思路：viewport 在這里就是 window，image 在這里是 .container。然后加上這個(gè)結(jié)論（contain部分）我們不難得算出背景圖在 contain 以后的寬、高。

在之前的基礎(chǔ)上，添加計(jì)算背景圖寬、高的邏輯：

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

還剩一個(gè)定位問題了，很簡單，這里就只做了兩個(gè) icon 的定位。查看完整demo

至此，你可以隨意改變窗口的大小，而頁面一直都會(huì)保持在整屏中，而且不會(huì)變形，其中的元素也可以定位準(zhǔn)確，基本上滿足了整屏頁面的所有問題。

其實(shí)，整屏頁面就只有兩個(gè)關(guān)鍵點(diǎn)：背景圖片不變形 、頁面中元素位置固定，你只要能做到這兩點(diǎn)就可以了。但是，你也能看到我們用上面的辦法做出的效果兩側(cè)會(huì)有突兀的背景露出來

我們白忙活一場么？看下圖：

背景 contain 以后不就是這兩種情況么？
圖1是我們現(xiàn)在的情況，圖2是背景的寬高比小于容器的寬高比的情況?？梢韵胂螅瑹o論什么樣的背景，我們在使用了這種方法后要么露出左右的背景，要么露出下面的背景。
雖然我們解決了 背景圖片不變形和頁面中元素位置固定問題，但是這個(gè)問題又在困擾著我們，所謂『魚和熊掌不可兼得』。

這里介紹的方法其實(shí)不是PM們想要的，他們可能想要第一種方法的效果。但其實(shí)是設(shè)計(jì)圖的影響，本文demo的設(shè)計(jì)圖其實(shí)不適合這種方法?，F(xiàn)在看一個(gè)適用于這種方法的demo，這種設(shè)計(jì)恐怕是第一種方法所不能做到的。

總結(jié)

這里只是給大家多一種思路，具體問題還需要具體對待，不能一概而論。至少，以后你可以在遇到這種需求的時(shí)候，把本文的圖片甩給他，問他要怎么樣，那這篇文章也沒有白寫了。

我的博客，歡迎訂閱


微博粉絲太少，求粉

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78267.html

相關(guān)文章

  • 使用Slip.js快速創(chuàng)建整屏滑動(dòng)的手機(jī)網(wǎng)頁

    摘要：解說暴露到全局的方法，只要你引入，就可以得到這個(gè)實(shí)用牛逼的方法。設(shè)置頁面展現(xiàn)為全屏滑動(dòng)頁面的方法。至此，一個(gè)全屏滑動(dòng)網(wǎng)頁就完成了，難以想象的簡單快速。注意頁數(shù)是從開始的，所以上面的最后一頁是，而不是。如果想迫切試用，可以直接查看文檔。 現(xiàn)在滑屏網(wǎng)頁越來越多，比如我在搜狐視頻就做了好幾個(gè)，舉個(gè)例子，可以用手機(jī)掃描以下的二維碼訪問： showImg(http://qianbao.baid...

    lucas 評論0 收藏0

  • 如何寫一個(gè)整屏滑動(dòng)的移動(dòng)頁面

    摘要：國慶前幾天花了點(diǎn)時(shí)間寫一個(gè)整屏滑動(dòng)的移動(dòng)頁面的，時(shí)間短暫還有很多東西沒寫。其中碰到的坑是的時(shí)間通過無法阻擋默認(rèn)事件，只能，但是電腦上模擬移動(dòng)頁面可以使用 國慶前幾天花了點(diǎn)時(shí)間寫一個(gè)整屏滑動(dòng)的移動(dòng)頁面的demo，時(shí)間短暫還有很多東西沒寫。 跟基友 http://segmentfault.com/blog/laopopo/1190000000708417 差不多，但思路上不太一樣，大家可...

    hot_pot_Leo 評論0 收藏0

  • 移動(dòng)端開發(fā)（使用webuploader上傳圖片,客戶端交互,修改alert彈窗等）

    摘要：之前實(shí)習(xí)做的一個(gè)移動(dòng)端的頁面需要的功能有圖片上傳點(diǎn)擊客戶端的返回按鈕有提示即與客戶端有交互遇到不少的坑總結(jié)一下問題圖片上傳功能使用工具百度的暫時(shí)遇到的坑刪除圖片實(shí)際上并沒有完全刪除需要自己在源碼上添加詳情看的提問上傳的圖片旋轉(zhuǎn)角度有問題比 之前實(shí)習(xí)做的一個(gè)移動(dòng)端的頁面 需要的功能有圖片上傳 點(diǎn)擊客戶端的返回按鈕 有提示(即與客戶端有交互） 遇到不少的坑 總結(jié)一下問題 1.圖片上傳功能 ...

    李昌杰 評論0 收藏0

  • 移動(dòng)端web app自適應(yīng)布局探索與總結(jié)

    摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)值，然后頁面的所有元素布局均相對于該值采用單位設(shè)定。 1、困擾多時(shí)的問題 在這之前做web app開發(fā)的的時(shí)候，在自適應(yīng)方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個(gè)平衡值寫死，我們的設(shè)計(jì)稿都是iPhone5的640 * 1136標(biāo)準(zhǔn)，所以高度一般取個(gè)大概值，各種圖標(biāo)的...

    Benedict Evans 評論0 收藏0

  • 移動(dòng)端web app自適應(yīng)布局探索與總結(jié)

    摘要：方案的簡單介紹基于前提頁面元素的布局尺寸全都以設(shè)計(jì)稿為基準(zhǔn)等比例設(shè)置。給根節(jié)點(diǎn)設(shè)置一個(gè)基礎(chǔ)值，然后頁面的所有元素布局均相對于該值采用單位設(shè)定。 1、困擾多時(shí)的問題 在這之前做web app開發(fā)的的時(shí)候，在自適應(yīng)方面一般都是寬度通過百分比，高度以iPhone6跟iPhone5之間的一個(gè)平衡值寫死，我們的設(shè)計(jì)稿都是iPhone5的640 * 1136標(biāo)準(zhǔn)，所以高度一般取個(gè)大概值，各種圖標(biāo)的...

    wangjuntytl 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<