国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

開(kāi)發(fā)H5時(shí)背景照片兼容不同手機(jī)屏幕處理的最佳實(shí)踐

MonoLog / 3104人閱讀

摘要：翻頁(yè)的背景圖通常是要求全屏的。這里就存在一個(gè)問(wèn)題，目前市面上的手機(jī)屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。設(shè)置背景圖的是生成圖片會(huì)是這樣的效果比例的手機(jī)裁切的是靠下的部分，而比例的手機(jī)裁切的是靠右的部分。

最近在重新做過(guò)去常做的翻頁(yè)H5，關(guān)于背景圖有些新的經(jīng)驗(yàn)心得分享。

翻頁(yè)H5的背景圖通常是要求全屏的。這里就存在一個(gè)問(wèn)題，目前市面上的手機(jī)屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。

通常我會(huì)以600*1000這個(gè)比例來(lái)選擇或者設(shè)計(jì)（好記，PS輸入方便，比例適中）背景圖，譬如這樣一張美女背影圖：（讓我看見(jiàn)你們的雙手，不要往褲襠伸！）

一、四年前我的方案

三、四年的手機(jī)相對(duì)還沒(méi)有那么多瘦長(zhǎng)的譬如iPhone7尤其是iPhoneX的時(shí)候，我的解決方法是容忍適度的拉伸。

當(dāng)時(shí)常見(jiàn)的手機(jī)屏幕比例：

（320*480） 寬/高=0.66 iphone4

（480*800） 寬/高=0.6 三星多款和一些安卓

（750*1334）寬/高=0.56 iphone6

設(shè)置背景圖的css是：

  .img{
    background-image:url("slide.jpg");
    background-size:100% 100%;
  }

如此一來(lái)，寬/高=0.6比例的手機(jī)將完美顯示，而更扁的手機(jī)如iphone4背景圖會(huì)有橫向拉伸，更瘦長(zhǎng)如iphone6則是縱向拉伸。計(jì)算一下，拉伸率最高是11%左右，勉強(qiáng)可以接受。

可以看下效果，中間是實(shí)圖比例，左邊壓扁，右邊拉長(zhǎng)：

（反正如果實(shí)際是這三款背景的姑娘我都要了！）

二、如果現(xiàn)在還是用一樣的方案

然而到了今天，突然冒出來(lái)越來(lái)越多像iPhone X這樣的瘦長(zhǎng)款手機(jī)，如果按照原來(lái)的方案，要取中間值的比例來(lái)做背景圖，將會(huì)是這樣的效果：

最右邊是iPhone X上的拉伸：

最右邊這樣的背影怕是一抱就會(huì)斷的感覺(jué)

這已經(jīng)是明顯不能接受的畸形了。當(dāng)然為了適應(yīng)iPhoneX這樣的手機(jī)，如果以舊方案來(lái)設(shè)計(jì)背景圖，可能使用的標(biāo)準(zhǔn)圖片的比例應(yīng)該大約是600*1050的尺寸會(huì)更好些。

不過(guò)無(wú)論怎么說(shuō)，這個(gè)區(qū)間的極值會(huì)讓即便中間比例的照片都會(huì)帶來(lái)不能容忍的拉伸比例。

三、裁切解決

于是考慮從裁切的方式來(lái)解決，css3里的background-size有一個(gè)cover屬性，就是用來(lái)處理背景的裁切：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。

設(shè)置背景圖的css是：

  .img{
    background-image:url("slide.jpg");
    background-size:cover
  }

生成圖片會(huì)是這樣的效果：

iPhone4比例的手機(jī)裁切的是靠下的部分，而iPhone6/iPhoneX比例的手機(jī)裁切的是靠右的部分。這帶來(lái)一個(gè)新問(wèn)題：很容易把照片的關(guān)鍵元素裁切掉，譬如已經(jīng)在iPhoneX上看不到美女的右邊胳膊。

四、裁切，并保持背景圖顯示中心位置

這時(shí)我們可以利用background-position來(lái)實(shí)現(xiàn)圖片的裁切從四周開(kāi)始。

設(shè)置背景圖的css是：

  .img{
    background-image:url("slide.jpg");
    background-position:center;
    background-size:cover
  }

加了背景的定位，會(huì)讓背景在裁切中保持居中的裁切效果：

那么我們?cè)跇?gòu)圖時(shí)有什么考慮呢？

五、選擇（設(shè)計(jì)）圖片時(shí)構(gòu)圖

我又做了個(gè)頁(yè)面把構(gòu)圖做成示意圖：

整張圖片是設(shè)計(jì)圖，藍(lán)色部分是會(huì)被裁切掉上下部分顯示在iPhone4比例的手機(jī)上，而紅色部分是會(huì)被裁切掉左右顯示在iPhoneX比例的手機(jī)上：

看完這個(gè)圖，你應(yīng)該能知道在設(shè)計(jì)或選擇圖片時(shí)，只要將必須顯示的元素放在紅藍(lán)重疊的地方（人物中的胸啊，臉啊，臀啊），就能保證在任意手機(jī)上，照片上的關(guān)鍵元素都不能丟失。

所有效果都做成了html放在了我的github項(xiàng)目上：

https://github.com/1897890924...

同發(fā)我的個(gè)人博客 https://sxg.kuashou.com

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117334.html

相關(guān)文章

  • 開(kāi)發(fā)H5時(shí)背景照片兼容不同手機(jī)屏幕處理的最佳實(shí)踐

    摘要：翻頁(yè)的背景圖通常是要求全屏的。這里就存在一個(gè)問(wèn)題，目前市面上的手機(jī)屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。設(shè)置背景圖的是生成圖片會(huì)是這樣的效果比例的手機(jī)裁切的是靠下的部分，而比例的手機(jī)裁切的是靠右的部分。 最近在重新做過(guò)去常做的翻頁(yè)H5，關(guān)于背景圖有些新的經(jīng)驗(yàn)心得分享。 翻頁(yè)H5的背景圖通常是要求全屏的。這里就存在一個(gè)問(wèn)題，目前市面上的手機(jī)屏幕比例非常的不統(tǒng)一，這導(dǎo)致在...

    joyvw 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)整理

    摘要：難怪超過(guò)三分之一的開(kāi)發(fā)人員工作需要一些知識(shí)。但是隨著行業(yè)的飽和，初中級(jí)前端就業(yè)形勢(shì)不容樂(lè)觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識(shí)。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問(wèn)題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以內(nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過(guò)多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...

    Lowky 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)整理

    摘要：難怪超過(guò)三分之一的開(kāi)發(fā)人員工作需要一些知識(shí)。但是隨著行業(yè)的飽和，初中級(jí)前端就業(yè)形勢(shì)不容樂(lè)觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識(shí)。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問(wèn)題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以內(nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過(guò)多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...

    snowLu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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