1.遇到了什麼問題

實在就一句話，怎樣保證設想稿在差別型號差別分辨率的手機上面舉行高保真的復原？

2.業界怎樣處理

實在也是一句話，設想師供應要支撐的主流機型分辨率大小的設想稿，然後前端在符合該分辨率的機型下1：1舉行復原，其他分辨率機型下舉行等比例的縮放；

2.1. 設想師供應的設想稿的寬高是若干？

每一個公司的規範不一樣，我司是750px * 1334px，即根據iPhone6的裝備像素大小來供應；（裝備像素就是你的屏幕上面橫寬有若干物理像素點）

2.2. 前端怎樣寫代碼？

比方量到設想稿上面有一個100px * 100px 的元素，那末在代碼內里我們就先寫
.wrapper {
    width: 100px;
    height: 100px;
}
結果如下圖：

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

很明顯不是我們期待的結果，為何呢？
由於我們潛意識內里以為，代碼內里的1px === 裝備像素內里的1px；

實在，並非如許；
那末，代碼內里的1px =? 裝備像素內里的1px呢？
答案是，看你裝備的 layout viewport大小，而它也決議着默許情況下根元素的寬；在iPhone6內里layout viewport的寬是980px，所以就看到了上面那樣100px的方塊那末小；

那末，怎樣改layout viewport大小呢？
答案是，經由過程meta標籤，<meta name="viewport" content="width=你想要的寬">，我們這裏把它改成750px，結果如下圖：

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

那末此時，代碼內里的1px === 裝備像素內里的1px === 設想稿內里的1px；

2.3. 差別裝備怎樣等比例縮放？

2.4. 上面的縮放計劃會有什麼問題？

圖片隱約、字體、1px