在vue中根据devicePixelRatio处理多倍图(less)

最新推荐文章于 2024-04-27 10:16:11 发布

Kyrossssssss

最新推荐文章于 2024-04-27 10:16:11 发布

阅读量1.1k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_35590165/article/details/107033484

版权

本文介绍了如何在Vue项目中利用devicePixelRatio动态处理不同设备的多倍图，通过创建vue.prototype.ts和vue.prototype.d.ts文件，并在main.ts中引入，实现页面模板语法的便捷应用。

摘要由CSDN通过智能技术生成

在vue中根据devicePixelRatio处理多倍图(less)

   devicePixelRatio为设备物理像素和设备独立像素的比例，在不同的机型上有2倍图和三倍图之分，比如p8和p8 plus就是一个二倍一个三倍。
   在less中的处理

.bg-image(@url) {
   
  background-image: e(%("url(~@/assets/images/%a@2x.png)", e(@url)));

  @media (-webkit-min-device-pixel-ratio: 3),
  (min-device-pixel-ratio: 3)

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Kyrossssssss

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css之移动端适配方案rem与less&媒体查询响应式布局&bootstrap

qq_66318904的博客

03-25

1661

less是一个css预处理器，less文件后缀是.less。扩充了css语言，使css具备一定的逻辑性，计算能力。注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件vscode插件：easy less，保存less文件后自动生成对应的css文件。

vue-device-detector：Vue移动版的微小设备检测器插件:chicken::eye:

02-03

Vue设备检测器 vue-device-detector是一个简单的vue插件，用于检查设备类型。专注于手机友善的强类型去做：添加dingding API 添加微信API 安装 npm install vue-device-detector --save 快速开始 import device from "vue-device-detector" Vue . use ( device ) 方法组件上下文中的this。$ device。 Vue。$ device全局。 API清单您可以在this。$ device下获得以下属性 interface IDeviceDetector { ios : Boolean iphone : Boolean iphoneX : Boolean iPhoneXR : Boolean iPhoneXSMax : Boolean ipod : Boolean ipad : Boolean android : Boolean androidPhone : Boolean windows : Bool

参与评论您还未登录，请先登录后发表或查看评论

vue 二三倍图适配，1像素边框

weixin_30544657的博客

10-17

414

//文件名为mixin.scss// 2,3倍图适配 @mixin bg-image($url){ background-image: url("~imgs/icon/" + $url + "@2x.png"); @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ ...

vue的移动端响应式尺寸单位配置/二倍图

阿牛哥的博客

09-08

595

移动端响应式尺寸单位配置/二倍图

vue3里监听window事件(放大缩小devicePixelRatio)或者document事件（窗口宽高变化documentElement.clientWidth）

Yany的博客

07-01

3733

监听事件

处理2倍图片和3倍图片

小毛驴的博客

06-25

4970

这是scss的mixin.scss @mixin bg-image($url) { background-image: url($url + &quot;@2x.png&quot;); @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){ background-image: url($url + &quot;@3x.png&quot;...

解决Vue2.0中使用less给元素添加背景图片出现的问题

11-30

在Vue 2.0项目中，使用Less进行样式编写时，可能会遇到给元素添加背景图片时出现的问题。本文将详细解析这个问题的成因，并提供正确的解决方案。首先，我们需要理解Less是一种预处理器，它允许我们使用变量、嵌套...

html2canvas与window.devicePixelRatio

EmotionComputer

11-26

842

html2canvas 与 window.devicePixelRatio

解决vue中使用less/sass及使用中遇到无效的问题

01-18

在vue官方脚手架中，即vue-lci搭建的项目中，可以轻易的使用less/sass。先使用npm下载依赖，命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象： { test: /\.less$/, ...

使用vue + less 实现简单换肤功能的示例

08-28

在事件处理函数中，我们可以通过控制元素的类名来实现换肤的效果。知识点四：使用 Less 导入和 mixin 我们使用 `@import` 语句来导入 `theme.less` 文件，并使用 mixin 来定义不同的皮肤样式。通过在不同的皮肤...

vue 项目关于不同分辨率的电脑网页适配方案

最新发布

前端，请指教

04-27

1526

【代码】vue 项目关于不同分辨率的电脑网页适配方案。

vue中实现@2x和@3x图片加载，以及cssmap的使用方式

weixin_30575309的博客

08-28

430

在前端开发中因为屏幕像素比的关系，经常要根据各种型号手机的dpi来加载不同分辨率的图片，来提高性能以及更好的展示在vue开发中秉承组件化的开发原则，所有和该组件相关的图片应该和该组件在一个文件夹下，所以把这个组件全部相关的图片放入组件目录下，并按相同的规律命名文件接下来定义一个mixin.less 在组件的样式中引入这个混合变量，调用方式很简单：这样这个图标...

移动端多倍图自适应

cxz

05-17

384

1.第一种方法通过 css 的 DevicePixelRatio 媒体查询属性: /*默认大小*/ .photo { background-image: url(image100.png); background-size: 100px 100px; } /* 如果设备像素大于等于2，则用2倍图 */ @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) {

css 2倍图 3倍图使用方法

csdnUser0001的博客

03-03

2805

css二倍图的使用使用 CSS 的 DevicePixelRatio 媒查询属性参考 CSS 或 srcset 让浏览器自动切换 1X/2X/3X图像移动端项目中 @2x 图和 @3x 图的使用（需要支持css3） /默认大小/ .photo {background-image: url(image100.png);} /* 如果设备像素大于等于2，则用2倍图 / @media scre...

移动端一倍图，二倍图，三倍图尺寸的问题