鍍金池/ 問答/HTML5  HTML/ 怎么根據(jù)前端ui的設(shè)計(jì)圖寫html元素大小?疑惑

怎么根據(jù)前端ui的設(shè)計(jì)圖寫html元素大小?疑惑

設(shè)計(jì)稿是1920*1080的圖 ,上面標(biāo)注的div 寬度 100px 高 50px ,我在css里面寫 width:100px;height:50px;在屏幕上看起來和設(shè)計(jì)稿比例不一樣.看起來大很多.這要怎么做?

回答
編輯回答
爆扎
  1. 首先確認(rèn)一點(diǎn)，設(shè)計(jì)稿1920x1080，實(shí)際中要減去標(biāo)題欄、滾動(dòng)條甚至工具欄、標(biāo)簽頁等的距離，才是真實(shí)的頁面大??；
  2. 確保觀看頁面效果的顯示器或者屏幕，起碼可以達(dá)到1920x1980的分辨率水平（當(dāng)然也不是必須，但起碼會(huì)比較省事。小屏幕比如1366x768，倒是也可以通過響應(yīng)式設(shè)計(jì)模式，設(shè)置成較大的分辨率，但看起來總是麻煩點(diǎn)的不是？），并且DPR保持為1（系統(tǒng)的顯示設(shè)置里縮放為100%，且瀏覽器的縮放為100%，不確定的話去控制臺(tái)打印下window.devicePixelRatio看下是不是1）
  3. 確保那個(gè)被標(biāo)注的組件確實(shí)是100x50，最好去ps里用標(biāo)尺工具實(shí)際量一下……
  4. 如果3不能確定，那給瀏覽器裝個(gè)設(shè)計(jì)稿比對(duì)插件然后把預(yù)覽輸出拖進(jìn)去看看能不能重疊上就好了。我記得騰訊的哪個(gè)團(tuán)隊(duì)好像有個(gè)這樣的插件吧，好像叫啥AlloyDesign啥的，我手機(jī)記不太清了，你去搜下吧。
2018年1月17日 16:12
編輯回答
空痕

PS需要設(shè)置像素大小，這樣才能做到等比還原。
我以前的同事給的美工稿也有這個(gè)問題，因?yàn)樗饕亲鲇∷⑵吩O(shè)計(jì)，所以會(huì)出現(xiàn)類似問題，原因就是像素大小不一樣

2017年10月11日 18:44