VUE2.0--移动端@2x和@3x（scss加载）

最新推荐文章于 2024-07-28 20:17:15 发布
最新推荐文章于 2024-07-28 20:17:15 发布
阅读量1.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41797053/article/details/82765405
本文深入探讨了设备像素比的概念及其在移动端加载效果中的关键作用。默认值为2，合理设定可避免显示大小不一致的问题。通过使用SASS预处理，开发者能更高效地管理样式，确保应用在不同设备上的一致性。

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

在这里插入图片描述

------设备像素比的大小，直接影响在移动端加载的效果。若是不设定，可能显示出大小不一的情况。
-------现在移动端设备的像素比一般都是2或3，默认情况下2.

-------而且这是企业开发中面临的实际情况，这里使用的是sass预处理

React - Sass 移动端使用 2 3倍图
sinat_33184880的博客
04-03 707
安装 node-sass npm i node-sass -D 项目目录结构 mixins.scss 文件 // mixins.scss @mixin bg-image ($url) { background-image: url($url + '@2x.png'); background-size: 100%; background-repeat: no-repeat; ...
什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
y_l33的博客
01-07 382
物理像素
前端中的@2x，@3x 图片
weixin_42028153的博客
08-10 3016
虽然高分辨率屏幕在移动设备上更为普遍，但在其他设备上也存在高分辨率显示需求，例如Android手机、平板电脑、电视等。一倍图适用于低分辨率屏幕，二倍图适用于中等分辨率屏幕，而三倍图适用于高分辨率屏幕。在美工提供给我们的切图中经常会看到一个图片有很多个尺寸，之前都是在网站中默认使用的1倍图，也就是默认尺寸的图片，其他的2倍图3倍图压根就没用过，今天又看到相关知识，深入探索了一把。一般普通图在的1920*1080，是很正常的，但是如果放在的2k或者4K屏幕里面，背景图就是模糊掉，为什么呢？
移动端页面动态加载 2X & 3X 图片
weixin_42317878的博客
11-20 1559
 开发背景   开发移动端H5页面 面对不同分辨率的手机 为什么要用不同倍率下的图片  ？ 有时候我们会发现，当我们在适某一机型的时候，显示上没什么问题。但是一旦我换到另外一部手机，发现出现了模糊的情况，尤其以图片更为显著，这只是表象，究其原因是  设备像素比， 可以先看几个概念 ： 在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。 物理像素(physical pixe...
vue中@2x和@3x图片的使用
江湖行骗老中医
08-04 2746
路由跳转：this.$router.push({path: '/business-head/events/dialog', query: {id: rowid, type: "diit"}})
黑马头条vue2.0项目实战（一）——项目初始化（移动rem适配）
weixin_56370772的博客
07-28 1146
创建项目可以根据项目自定义 class 前缀。
Vue.js 2.0 UI元素库：vue-impression，专为移动端设计
vue-impression作为一个专为移动端优化的Vue.js UI元素库，不仅提供了丰富的组件，还支持样式定制和摇树优化，使得在移动端开发中可以大幅提高开发效率。它非常适合需要快速构建移动应用界面的开发者，并且其简洁的...
基于Vue全家桶（2.x）制作的美团外卖APP.zip
最新发布
12-01
基于Promise的网络请求插件vue-lazyload第三方图片懒加载库，优化页面加载速度better-scrolliscroll 的优化版，使移动端滑动体验更顺畅Mint UI一套基于 Vue 2.0 的移动端库组件，出自饿了么前端Sass(Scss)css预编译...
基于 Vue 2.0 的 Mobile 组件库 Vant.zip
09-17
Vant 是一个专为 Mobile 端设计的 Vue 2.0 组件库，它提供了丰富的 UI 组件，旨在帮助开发者快速构建轻量、高性能的移动端应用。Vant 深受 Vue 社区的喜爱，因为其简洁的 API 设计、良好的文档支持以及对性能的极致...
AtomDesign基于Vue20的移动端组件库
08-14
Atom Design 是一个专为Vue 2.0框架打造的移动端组件库，旨在提供一套完整的、易用的UI解决方案，帮助开发者快速构建响应式且具有良好用户体验的移动应用。它结合了Vue.js的灵活性和组件化思想，使开发过程更加高效...
基于vue23x构建的elements外卖APP
08-12
基于vue2.3.x构建的elements外卖APP
Serv-U Serv-U，是一种被广泛运用的FTP服务器端软件，支持3x/9x/ME/NT/2K等全Windows系列。
12-04
FTP架设，比较好用的软件，Serv-U，是一种被广泛运用的FTP服务器端软件，支持3x/9x/ME/NT/2K等全Windows系列。可以设定多个FTP服务器、限定登录用户的权限、登录主目录及空间大小等，功能非常完备。 它具有非常完备的安全特性，支持SSl FTP传输，支持在多个Serv-U和FTP客户端通过SSL加密连接保护您的数据安全等。
移动端关于@2x与@3x的图片加载实现方法（基于vue.js+stylus）
qq_38229202的博客
04-08 4028
1.首先创建mixin.styl文件代码如下： bg-image($url) // 创建bg-image($url)函数 background-image: url($url + "@2x.png") @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background-ima
小程序怎么处理2x，3x图？
第二世界
10-28 3684
1.wxss的解决办法（推荐） @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ .imgTest{ background: url(../images/2x.png) no-repeat; } } @media (-webkit-min-device-pixel-ratio:...
移动端项目中 @2x 图 和 @3x 图 的解决方案
@必意玲
04-25 5468
1. 很多人会问？为什么移动端需要@2x或者@3x的图片 ? 具体请参考：为什么移动端需要@2x或者@3x的图片 本篇主要是解决@2x 图 和 @3x 图 的实现方案，下面是具体板栗。 说在前面的话： 移动端开发过程中，你会发现公司项目图片文件夹中会有很多@2x或者@3x的图标，是因为手机的dpr(设备像素比不同)，我们> 需要根据dpr来修改不同大小的图标，来解决不同设备用户视觉体验。 ...
移动端项目中 @2x 图 和 @3x 图 的使用
热门推荐
wandoumm的博客
05-07 1万+
移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。123456@mixin bg-image($url) {    background-image: url($url + "@2x.png");    @media (-webkit-min-device-pixe...
移动端适配以及2x图、3x图的使用
要优秀！
04-10 4082
1、怎么使用2x图、3x图 (1)定义mixin.less文件 /* 根据dpr显示2x图/3x图 */ .bg-image(@url){ background-image:~"url('@{url}@2x.png')"; @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio...
使用 CSS 解决 @2x 和@3x 图片问题
肖皓文
04-27 8724
移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小: 使用css通过@media 判断像素比去切换不同照片如下 再通过css预处理器封装为一个公用方法 方便使用 使用 CSS 的 devicePixelRatio 媒查询属性 /*默认大小*/ .photo {width:100px;height:100px;} .photo {background-...
移动端项目中 @2x 图 和 @3x 图 的使用（需要支持css3）
fifthThirteen-- A Rookie Web Front-end development
11-07 1万+
移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小: 1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。 1 2 3 4 5 6 @mixin bg-image($url) {     background-image: url($ur...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值