关于DPR2.0&DPR3.0手机上的适配问题（focusdroid）

focusdroid

于 2017-11-08 15:43:29 发布

阅读量1.1k

点赞数 1

分类专栏：手机上传图片

本文链接：https://blog.youkuaiyun.com/focusdroid/article/details/78479581

版权

手机上传图片专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种针对DPR2.0及DPR3.0S手机的适配方法，通过简单的代码调整背景图片资源，确保不同设备像素密度下图片的清晰度。关键在于使用媒体查询来根据不同设备像素比加载不同分辨率的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DPR2.0&DPR3.0S手机适配问题

就一行代码解决问题，解决不了就去……

<template>
   <div>
       这是商家+++页面
       <div class="box">

       </div>
   </div>
</template>
<script>

</script>
<style lang="scss" scoped>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background-image: url('./img/brand@2x.png');
      //这句是关键
    @media (-webkit-min-device-pixel-ratio:3), (min-device-pixel-ratio:3) {
        background-image: url('./img/brand@3x.png')
    }
    background-repeat: no-repeat;
}
</style>