怎么根据前端ui的设计图写html元素大小?疑惑

Question

设计稿是1920*1080的图 ,上面标注的div 宽度 100px 高 50px ,我在css里面写 width:100px;height:50px;在屏幕上看起来和设计稿比例不一样.看起来大很多.这要怎么做?

Answer 1

PS需要设置像素大小，这样才能做到等比还原。
我以前的同事给的美工稿也有这个问题，因为她主要是做印刷品设计，所以会出现类似问题，原因就是像素大小不一样

Answer 2

1. 首先确认一点，设计稿1920x1080，实际中要减去标题栏、滚动条甚至工具栏、标签页等的距离，才是真实的页面大小；
2. 确保观看页面效果的显示器或者屏幕，起码可以达到1920x1980的分辨率水平（当然也不是必须，但起码会比较省事。小屏幕比如1366x768，倒是也可以通过响应式设计模式，设置成较大的分辨率，但看起来总是麻烦点的不是？），并且DPR保持为1（系统的显示设置里缩放为100%，且浏览器的缩放为100%，不确定的话去控制台打印下window.devicePixelRatio看下是不是1）
3. 确保那个被标注的组件确实是100x50，最好去ps里用标尺工具实际量一下……
4. 如果3不能确定，那给浏览器装个设计稿比对插件然后把预览输出拖进去看看能不能重叠上就好了。我记得腾讯的哪个团队好像有个这样的插件吧，好像叫啥AlloyDesign啥的，我手机记不太清了，你去搜下吧。