网页设计稿一开始画稿怎么设，为何PS保存出来的图片大小和电脑上看的不一样-阿里云开发者社区

网页设计稿一开始画稿怎么设，为何PS保存出来的图片大小和电脑上看的不一样

2024-07-02 5

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 网页设计稿一开始画稿怎么设，为何PS保存出来的图片大小和电脑上看的不一样

1、1920px * 3000px ，分辨率57.6

1.1 可以实现：由网页复制到设计稿的尺寸已经变的相同了

2、但是这种设计导出的png，落实到展现的时候，却发现走了形状，这里该怎么解决

3、这里导致原因是原因分析一：有可能是不同的分辨率导致的，不同的分辨率会导致导出图片大小不一（一般屏显模型的分辨率为72或96ppi）这里参考这里的资料

如何查看显示器的分辨率？ - 琴策网 (bufeishi.cn)

如何查看屏幕分辨率【百科全说】 (bkqs.com.cn)

4、后来查了一下，大部分人说设计的PS宽度是72px

5、这里的解决方法是修改媒体查询为：就可以解决了，可以参考下面的文章

    @media (max-width: 1919px) and (min-width: 768px) {
      html {
        zoom: 80%;
      }
 
      @-ms-viewport {
        width: 1920px;
      }
    }