以vue中使用stylus为例
mixin.stylus
bg-image($url)
background-image url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
background-image url($url + "@3x.png")
同样的，在需要根据dpi适配不同图片的地方引入这段代码,使用的时候
<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl';
.star
bg-image('star48_on')
</style>
这样就可以了
适配的是这两张图片，注意图片名字：
star48_on@2x.png
star48_on@3x.png
具体的要怎么适配，对于不同的需求当然还需要对代码进行适当修改
以vue中使用stylus为例 mixin.stylus 同样的，在需要根据dpi适配不同图片的地方引入这段代码,...
移动端适配 dpr、DPI、PPI 视口 移动端适配的方案 微信小程序适配方案 微信小程序开发
移动端适配方案：1）viewport（scale=1/dpr）2）rem3）flex4）vm/vh一、什么是移动端...
作者: 何永峰；标签: 屏幕适配 屏幕适配 适配都是老生常谈，移动端要根据手机屏幕适配，PC端也有时候根据不同的...
在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。今天这篇文字，主要说一个东西－dpr。 我们都知...
移动端开发中的相关概念讲解 1、移动端自适配方案 移动端如何根据不同手机尺寸进行页面的适配 rem 自适应和 vw...
移动端开发过程中，因为手机的dpr(设备像素比不同)，需要根据dpr来修改图标的大小，判断使用@2x 图 还是 @...
例子： 在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。在...
相关链接：移动端适配 — 细节补充（一） Retina屏幕&普通屏幕，模糊的由来 dpr的具体表现 有时候我们会发...
左右布局，左边不动，右边随动 文本超出省略 图片列表优化 响应式图片 利用多倍图去适配不同 dpr 的屏幕 图片丢...
本文标题：移动端根据dpr适配不同图片
本文链接：https://www.haomeiwen.com/subject/hjuhcqtx.html
网友评论