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

資訊專欄INFORMATION COLUMN

我的前端規(guī)范系列-高清屏適配[按標(biāo)準(zhǔn)來就行]

Carbs / 1744人閱讀

摘要：因?yàn)橹挥杏玫轿粓D的地方才會出現(xiàn)像素缺失和像素丟失的狀況其他的元素都是系統(tǒng)繪制的矢量圖形不受是否是高清屏幕的影響。解決方案圖標(biāo)準(zhǔn)還是按照上方的標(biāo)準(zhǔn)。比如大小為的按鈕按上面標(biāo)準(zhǔn)換算成為這就蛋疼了，你無法直觀看出這個按鈕多大修改起來更是蛋疼。

目標(biāo)

1.明確統(tǒng)一@x圖的標(biāo)準(zhǔn)，以750x1334切下來的圖 為@2x的標(biāo)準(zhǔn)
2.使用以屏幕寬度為基準(zhǔn)的相對單位,為了適配,從設(shè)計稿到成品肯定存在換算過程
3.為位圖的容器設(shè)置寬高
適配后效果圖:基本不會出現(xiàn)很不理想的狀況

什么才是標(biāo)準(zhǔn)的@2x圖？

其實(shí)已750x1334設(shè)計出來的圖，切下來，剛剛好就是2x圖，縮小1倍就是1x，乘以1.5就是3x圖

設(shè)計稿里量下的寬高就是你需要的寬高嗎？

不是的 ??！比如750px的iphone6 量出75px的物體，在375px的手機(jī)里肯定只有35px。所以為了適配你必需轉(zhuǎn)換成以屏幕寬度為標(biāo)準(zhǔn)的相對單位,所以換算過程肯定是存在的,因?yàn)樵O(shè)計稿只是一個750的基準(zhǔn)。
@x圖只針對于圖片和圖標(biāo),這種需要用到位圖的地方詳細(xì)原理請點(diǎn)擊查看.
其目標(biāo)既是在等大的容器內(nèi)裝入像素更大的位圖,從而補(bǔ)足像素點(diǎn)的缺失。
因?yàn)橹挥杏玫轿粓D的地方才會出現(xiàn)像素缺失和像素丟失的狀況,其他的元素都是系統(tǒng)繪制的矢量圖形不受是否是高清屏幕的影響。

@x圖過大過小會出現(xiàn)什么問題？ @x圖比實(shí)際需要小

如果@x圖比實(shí)際需要小，那么圖像就會模糊。

@x圖比實(shí)際需要大

如果@x圖比實(shí)際需要大時會出現(xiàn)什么問題，其實(shí)這種情況也會出現(xiàn)問題只是問題不明顯，會出現(xiàn)的問題就是圖像失真，因?yàn)樵O(shè)備實(shí)際上沒那么多像素點(diǎn)顯示，就是丟失一些像素點(diǎn)。這種情況一般不易察覺,但是問題肯定是存在的。這就是為什么有些同志拿到大圖了，卻覺得可以的原因，因?yàn)橹灰拗屏藞D片的大小，他自己也看不出問題。
另外還有一點(diǎn)，就是web前端同志拿到的圖片會過大,這個影響就比較大了。
所以不是用越大的圖就越好。

解決方案

@x圖標(biāo)準(zhǔn)還是按照上方的標(biāo)準(zhǔn)。如果發(fā)現(xiàn)ps切下來的@2x比設(shè)計稿里的大了，既是出現(xiàn)錯誤。
另外程序端還是建議按設(shè)計稿給用到圖片的地方設(shè)置寬高,這樣防止換了大圖后圖片撐開的問題。

h5端解決方案 使用rem相對單位而不是px

rem是指相對于根元素的字體大小的單位。
那么根據(jù)該原理：我們只需能動態(tài)獲取屏幕的dpr及寬度信息，并改變根元素的font-size，其余的所有頁面元素也將會進(jìn)行改變。



詳細(xì)原理請點(diǎn)擊查看
存在問題

但是該方案有個問題，rem單位很不直觀。比如大小為80px的按鈕, 按上面標(biāo)準(zhǔn)換算成rem為1.946rem[這就蛋疼了，你無法直觀看出這個按鈕多大,修改起來更是蛋疼。如果沒有一套優(yōu)雅的管理方案，后期修改基本靠感覺或者畫點(diǎn)時間計算下==]，接下來和大家聊聊如何優(yōu)雅的使用rem單位。

使用sass函數(shù)來輔助解決

假設(shè)對于一個iphone6的視覺稿，我們定義它的基準(zhǔn)值就是75 該基準(zhǔn)值是根據(jù)你的定義變的關(guān)于基準(zhǔn)值有問題可見
這樣我們就可以按照設(shè)計稿的大小寫進(jìn)程序,從而便于維護(hù)和識別

//輔助函數(shù)
// 例如: .px2rem(height, 80);
@mixin px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
使用相對單位vw

原理與上面的rem相同,也來得更簡單。因?yàn)関w本來就相對可視窗口寬度的百分比不受顯示器分辨率的影響。

存在問題

需要注意有版本要求：android4.4以上版本；ios8以上版本 最新兼容性查看
另外也存在百分比在設(shè)計稿中轉(zhuǎn)換到程序上的不直接問題

使用sass函數(shù)來輔助編程

同樣在定好設(shè)計稿后，可以書寫sass函數(shù)來輔助編程
假設(shè)設(shè)計稿為750*1330 上的按鈕大小為120px,那么可以這么書寫

//.px2rem(width, 120);
@mixin px2vw(@name, @px){
    @{name}: @px / 750 * 1vw;
}
圖片的話推薦直接使用@2x 或者 使用矢量圖形

圖片這里因?yàn)閔5端特殊,既要考慮流量,又要考慮清晰度,這里推薦還是直接使用@2x圖吧!別折騰了！

小程序端解決方案 1.小程序需要使用rpx

rpx為小程序自己的單位,會對設(shè)備進(jìn)行適配
rpx與[750*1330]設(shè)計稿px的關(guān)系1px==1rpx,但是在iphone6上0.5px==1rpx 詳見

2.使用Taro框架[安利一波]

Taro 方案的初心就是為了打造一個多端開發(fā)的解決方案。目前 Taro 代碼可以支持轉(zhuǎn)換到 微信/百度/支付寶/字節(jié)跳動小程序 、 H5 端 以及 移動端（React-Native）。
Taro.js是京東出品的小程序框架,經(jīng)使用除了不支持一些react語法外，基本無大槽點(diǎn)[這里不經(jīng)要吐槽下騰訊官方的wepy，真是坑死人不償命!請慎用慎用!]
該框架直接服務(wù)到位,代碼直接書寫px單位[又不用記多一個rpx單位了

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

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

相關(guān)文章

  • 我的前端規(guī)范系列-高清屏適配[按標(biāo)準(zhǔn)來就行]

    摘要：因?yàn)橹挥杏玫轿粓D的地方才會出現(xiàn)像素缺失和像素丟失的狀況其他的元素都是系統(tǒng)繪制的矢量圖形不受是否是高清屏幕的影響。解決方案圖標(biāo)準(zhǔn)還是按照上方的標(biāo)準(zhǔn)。比如大小為的按鈕按上面標(biāo)準(zhǔn)換算成為這就蛋疼了，你無法直觀看出這個按鈕多大修改起來更是蛋疼。 目標(biāo) 1.明確統(tǒng)一@x圖的標(biāo)準(zhǔn)，以750x1334切下來的圖 為@2x的標(biāo)準(zhǔn)2.使用以屏幕寬度為基準(zhǔn)的相對單位,為了適配,從設(shè)計稿到成品肯定存在換算過...

    Tecode 評論0 收藏0

  • 我的前端規(guī)范系列-高清屏適配[按標(biāo)準(zhǔn)來就行]

    摘要：因?yàn)橹挥杏玫轿粓D的地方才會出現(xiàn)像素缺失和像素丟失的狀況其他的元素都是系統(tǒng)繪制的矢量圖形不受是否是高清屏幕的影響。解決方案圖標(biāo)準(zhǔn)還是按照上方的標(biāo)準(zhǔn)。比如大小為的按鈕按上面標(biāo)準(zhǔn)換算成為這就蛋疼了，你無法直觀看出這個按鈕多大修改起來更是蛋疼。 目標(biāo) 1.明確統(tǒng)一@x圖的標(biāo)準(zhǔn)，以750x1334切下來的圖 為@2x的標(biāo)準(zhǔn)2.使用以屏幕寬度為基準(zhǔn)的相對單位,為了適配,從設(shè)計稿到成品肯定存在換算過...

    阿羅 評論0 收藏0

  • 我的前端規(guī)范系列--前言

    摘要：前言程序開發(fā)變是常態(tài)不變是非常態(tài)只有定好不變的規(guī)范并做得足夠好才能更好的應(yīng)付變化。該系列文章會把平時工作中常遇到的問題場景拋出并提供解決方案，主要來自自己的學(xué)習(xí)和整理。 前言 程序開發(fā)變是常態(tài),不變是非常態(tài)只有定好不變的規(guī)范,并做得足夠好,才能更好的應(yīng)付變化。 該系列文章會把平時工作中常遇到的問題場景拋出并提供解決方案，主要來自自己的學(xué)習(xí)和整理。 現(xiàn)主要涉及如下:圖標(biāo)工程化[好用的圖標(biāo)...

    史占廣 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<