我的前端規范系列-高清屏適配[按標準來就行]

Carbs 發布于2019-08-02 16:11 / 1737人閱讀

摘要：因為只有用到位圖的地方才會出現像素缺失和像素丟失的狀況其他的元素都是系統繪制的矢量圖形不受是否是高清屏幕的影響。解決方案圖標準還是按照上方的標準。比如大小為的按鈕按上面標準換算成為這就蛋疼了，你無法直觀看出這個按鈕多大修改起來更是蛋疼。

目標

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

什么才是標準的@2x圖？

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

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

不是的！！比如750px的iphone6 量出75px的物體，在375px的手機里肯定只有35px。所以為了適配你必需轉換成以屏幕寬度為標準的相對單位,所以換算過程肯定是存在的,因為設計稿只是一個750的基準。
@x圖只針對于圖片和圖標,這種需要用到位圖的地方詳細原理請點擊查看.
其目標既是在等大的容器內裝入像素更大的位圖,從而補足像素點的缺失。
因為只有用到位圖的地方才會出現像素缺失和像素丟失的狀況,其他的元素都是系統繪制的矢量圖形不受是否是高清屏幕的影響。

@x圖過大過小會出現什么問題？ @x圖比實際需要小

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

@x圖比實際需要大

如果@x圖比實際需要大時會出現什么問題，其實這種情況也會出現問題只是問題不明顯，會出現的問題就是圖像失真，因為設備實際上沒那么多像素點顯示，就是丟失一些像素點。這種情況一般不易察覺,但是問題肯定是存在的。這就是為什么有些同志拿到大圖了，卻覺得可以的原因，因為只要他限制了圖片的大小，他自己也看不出問題。
另外還有一點，就是web前端同志拿到的圖片會過大,這個影響就比較大了。
所以不是用越大的圖就越好。

解決方案

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

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

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

詳細原理請點擊查看

存在問題

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

使用sass函數來輔助解決

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

//輔助函數
// 例如: .px2rem(height, 80);
@mixin px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

使用相對單位vw

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

存在問題

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

使用sass函數來輔助編程

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

//.px2rem(width, 120);
@mixin px2vw(@name, @px){
    @{name}: @px / 750 * 1vw;
}

圖片的話推薦直接使用@2x 或者使用矢量圖形

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

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

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

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

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

云服務器 GPU云服務器標準規范首屏標準前端規范前端規范文檔

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54827.html

我的前端規范系列-高清屏適配[按標準來就行]

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

Tecode 2019-08-30 15:43 評論0 收藏0
我的前端規范系列-高清屏適配[按標準來就行]

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

阿羅 2019-08-23 16:43 評論0 收藏0
我的前端規范系列--前言

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

史占廣 2019-08-23 16:43 評論0 收藏0