如何解决不能在Chrome / Firefox开发工具中模拟设备像素比率吗?
我一直在使用Chrome和Firefox开发工具测试不同的DPR,看来更改DPR对最终渲染没有明显影响。
我尝试了多个测试用例,包括真实照片和插图。我确保所用图像的分辨率明显小于2x或3x显示器上的分辨率。请参见下面的示例,并使用Chrome或Firefox开发人员工具中的响应式工具更改DPR。我在CSS中将图片的宽度设置为500px
。图像的固有分辨率为520 x 720像素。因此,在@ 3x设备上,应该将图像缩放到1500px宽,使其看起来模糊。
我的显示器是否需要支持3.0像素比例才能进行模拟?
body {
background: #dddddd;
}
img {
width: 500px;
height: auto;
}
<img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/apple-158419_960_720.png" alt="Red apple">
解决方法
我相信您正在寻找
body {
background: #dddddd;
}
img {
width: 100%;
height: auto;
}
我认为就是这样吗?它会按比例放大照片,以防止其按比例放大,您必须使用max-width / max-height并将其设置为您要在%tage切断之前所要达到的最大值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。