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

最新推荐文章于 2023-08-10 14:59:01 发布
最新推荐文章于 2023-08-10 14:59:01 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41797053/article/details/82765405
版权

在这里插入图片描述

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

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

cold-coffee
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6948
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
vue 多个api请求_vue-cli api请求
weixin_35041185的博客
12-24 666
vue-cli3 之【框架搭建】教程或许有的同学还不知道vue3.0与之前的版本有哪些好处，可以查查相关资料。主要改动是优化了节点，减少了无谓的遍历，优化速度提升了约6倍！那么vue-cli3.0框架与之前cli2.0又有了一些变化，我们简单说几个：1、名字改了，以前叫vue-cli,现在叫@vue/cli。2、build和co...文章Villin2020-11-1672浏览量vue-cli3....
什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
y_l33的博客
01-07 299
物理像素
React - Sass 移动端使用 2 3倍图
sinat_33184880的博客
04-03 645
安装 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; ...
前端中的@2x，@3x 图片
最新发布
weixin_42028153的博客
08-10 1434
虽然高分辨率屏幕在移动设备上更为普遍，但在其他设备上也存在高分辨率显示需求，例如Android手机、平板电脑、电视等。一倍图适用于低分辨率屏幕，二倍图适用于中等分辨率屏幕，而三倍图适用于高分辨率屏幕。在美工提供给我们的切图中经常会看到一个图片有很多个尺寸，之前都是在网站中默认使用的1倍图，也就是默认尺寸的图片，其他的2倍图3倍图压根就没用过，今天又看到相关知识，深入探索了一把。一般普通图在的1920*1080，是很正常的，但是如果放在的2k或者4K屏幕里面，背景图就是模糊掉，为什么呢？
移动端页面动态加载 2X & 3X 图片
weixin_42317878的博客
11-20 1499
 开发背景   开发移动端H5页面 面对不同分辨率的手机 为什么要用不同倍率下的图片  ？ 有时候我们会发现，当我们在适某一机型的时候，显示上没什么问题。但是一旦我换到另外一部手机，发现出现了模糊的情况，尤其以图片更为显著，这只是表象，究其原因是  设备像素比， 可以先看几个概念 ： 在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。 物理像素(physical pixe...
移动端关于@2x与@3x的图片加载实现方法（基于vue.js+stylus）
qq_38229202的博客
04-08 3970
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
基于 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的灵活性和组件化思想，使开发过程更加高效...
基于vue20实现的级联选择器
08-12
3. **组件逻辑**：在 Vue 的 `script` 部分，我们需要定义组件的 props 和 methods。props 接收上级传递的初始数据和事件，methods 包含处理用户交互的函数，如改变选中项或触发父组件的事件。 4. **级联逻辑**：当...
基于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图？
第二世界
10-28 3143
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:...
vue 2.x 与vue 3.x
weixin_56263402的博客
08-15 392
浅谈 vue3.x 与vue 2.x
使用 CSS 解决 @2x 和@3x 图片问题
肖皓文
04-27 8144
移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小: 使用css通过@media 判断像素比去切换不同照片如下 再通过css预处理器封装为一个公用方法 方便使用 使用 CSS 的 devicePixelRatio 媒查询属性 /*默认大小*/ .photo {width:100px;height:100px;} .photo {background-...
移动端项目中 @2x 图 和 @3x 图 的解决方案
@必意玲
04-25 5339
1. 很多人会问？为什么移动端需要@2x或者@3x的图片 ? 具体请参考：为什么移动端需要@2x或者@3x的图片 本篇主要是解决@2x 图 和 @3x 图 的实现方案，下面是具体板栗。 说在前面的话： 移动端开发过程中，你会发现公司项目图片文件夹中会有很多@2x或者@3x的图标，是因为手机的dpr(设备像素比不同)，我们> 需要根据dpr来修改不同大小的图标，来解决不同设备用户视觉体验。 ...
移动端项目中 @2x 图 和 @3x 图 的使用（需要支持css3）
fifthThirteen-- A Rookie Web Front-end development
11-07 9696
移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小: 1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。 1 2 3 4 5 6 @mixin bg-image($url) {     background-image: url($ur...
移动端项目中 @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 3961
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...
解决vue-cli@3安装问题与ts-vue项目搭建教程
"本文主要讲述了如何解决在安装vue-cli@3.xx时遇到的问题以及如何使用该版本的vue-cli搭建一个TypeScript驱动的Vue项目。在解决问题的过程中，提到了检查和更新Node.js版本、使用nvm(node版本管理器)以及通过vueui...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值