flexible

darkbug 發(fā)布于2019-08-22 17:05 / 3101人閱讀

摘要：遇到了什么問題其實就一句話，怎么保證設(shè)計稿在不同型號不同分辨率的手機上面進行高保真的還原業(yè)界怎么解決其實也是一句話，設(shè)計師提供要支持的主流機型分辨率大小的設(shè)計稿，然后前端在符合該分辨率的機型下進行還原，其他分辨率機型下進行等比例的縮放設(shè)計師

1.遇到了什么問題

其實就一句話，怎么保證設(shè)計稿在不同型號不同分辨率的手機上面進行高保真的還原？

2.業(yè)界怎么解決

其實也是一句話，設(shè)計師提供要支持的主流機型分辨率大小的設(shè)計稿，然后前端在符合該分辨率的機型下1：1進行還原，其他分辨率機型下進行等比例的縮放；

2.1. 設(shè)計師提供的設(shè)計稿的寬高是多少？

每個公司的標準不一樣，我司是750px * 1334px，即按照iPhone6的設(shè)備像素大小來提供；（設(shè)備像素就是你的屏幕上面橫寬有多少物理像素點）

2.2. 前端怎么寫代碼？

比如量到設(shè)計稿上面有一個100px * 100px 的元素，那么在代碼里面我們就先寫
.wrapper {
    width: 100px;
    height: 100px;
}
效果如下圖：

![clipboard.png](/img/bVbaejl)

很明顯不是我們期待的效果，為什么呢？
因為我們潛意識里面認為，代碼里面的1px === 設(shè)備像素里面的1px；

其實，并不是這樣；
那么，代碼里面的1px =? 設(shè)備像素里面的1px呢？
答案是，看你設(shè)備的 layout viewport大小，而它也決定著默認情況下根元素的寬；在iPhone6里面layout viewport的寬是980px，所以就看到了上面那樣100px的方塊那么小；

那么，怎么改layout viewport大小呢？
答案是，通過meta標簽，，我們這里把它改成750px，效果如下圖：

![clipboard.png](/img/bVbafKa)

那么此時，代碼里面的1px === 設(shè)備像素里面的1px === 設(shè)計稿里面的1px；

2.3. 不同設(shè)備怎么等比例縮放？ 2.4. 上面的縮放方案會有什么問題？

圖片模糊、字體、1px

GPU云服務(wù)器云服務(wù)器 flexible

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94846.html

相關(guān)文章

說說vue-cli中使用flexible和px2rem-loader

摘要：下載或在項目中引入一般情況在中引入設(shè)置標簽視情況而定安裝或在中配置，在項目文件中找到，將添加到中，，下的根據(jù)設(shè)計稿而定具體如下編譯新加由于設(shè)計稿是添加到里面省略項目中使用假設(shè)設(shè)計稿和分別是，具體代碼 1.下載lib-flexible npm i lib-flexible --save 或 yarn add lib-flexible 2.在項目中引入lib-flexible 一般情況在...

Heier 2019-08-23 15:31 評論0 收藏0
前端培訓(xùn)-初級階段-場景實戰(zhàn)（2019-05-23）-移動端適配bug

摘要：前端最基礎(chǔ)的就是。默認構(gòu)建一個真實的設(shè)置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓(xùn)初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應(yīng)方案前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...

FingerLiu 2019-08-02 16:18 評論0 收藏0
前端培訓(xùn)-初級階段-場景實戰(zhàn)（2019-05-23）-移動端適配bug

摘要：前端最基礎(chǔ)的就是。默認構(gòu)建一個真實的設(shè)置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓(xùn)初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應(yīng)方案前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...

xi4oh4o 2019-08-26 13:47 評論0 收藏0
前端培訓(xùn)-初級階段-場景實戰(zhàn)（2019-05-23）-移動端適配bug

摘要：前端最基礎(chǔ)的就是。默認構(gòu)建一個真實的設(shè)置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓(xùn)初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應(yīng)方案前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...

psychola 2019-08-30 10:54 評論0 收藏0
flexible 精簡版

摘要：看了源碼，不懂為什么對于沒有縮放，而是粗放設(shè)置，導(dǎo)致很不精細，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點，再回顧吧。本質(zhì)上就是把設(shè)置成物理像素大小，再縮小到屏幕獨立像素這么大限制最大為看了 flexible 源碼，不懂為什么對于android 沒有縮放，而是粗放設(shè)置，導(dǎo)致 android 很不精細，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點，再...

OnlyMyRailgun 2019-08-29 11:31 評論0 收藏0
flexible 精簡版

摘要：看了源碼，不懂為什么對于沒有縮放，而是粗放設(shè)置，導(dǎo)致很不精細，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點，再回顧吧。本質(zhì)上就是把設(shè)置成物理像素大小，再縮小到屏幕獨立像素這么大限制最大為看了 flexible 源碼，不懂為什么對于android 沒有縮放，而是粗放設(shè)置，導(dǎo)致 android 很不精細，于是略微刪減代碼如下，留著自己備用，后續(xù)如果再學(xué)到了什么知識點，再...

Java3y 2019-08-20 12:03 評論0 收藏0