vue 中用less 解决背景图片根据屏幕选择问题

最新推荐文章于 2023-09-08 13:45:49 发布
原创 最新推荐文章于 2023-09-08 13:45:49 发布 · 2.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #less

本文介绍了一种使用CSS设置背景图片并根据不同设备像素密度自动调整的方法。通过定义特定的CSS类，可以确保图片在不同分辨率下都能清晰显示。文章详细解释了如何利用媒体查询实现这一目标。

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

.bg-image(@url) {
  background-image: url('@{url}@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url('@{url}@3x.png');
  }
}


不能用+连接


                

        

    

    
  



    



                



	

		

			

				
					
vue2项目安装出现Syntax Error: Error: Cannot find module ‘less‘

				
			

			

				

					宁波阿成的博客
				

				

					12-20
					
					1246
					
				

			

		

		

			
				
vue2项目安装出现Syntax Error: Error: Cannot find module ‘less‘

			
		

	



                

            
              



	

		

			

				
					
微信小程序之店铺评分组件及vue中用svg实现的评分显示组件

				
			

			

				

					ZJW222的博客
				

				

					11-15
					
					674
					
				

			

		

		

			
				
在微信小程序中，有遇到要展示店铺评分，或者是订单完成后对商品进行评价，用到了星星展示，查了下，在微信中无法使用svg实现图片，微信中只能将svg图片转成base64来显示，所以是在vue中使用的svg来实现评分

1.效果图

微信中的可以点击及显示，但是，显示的话，在4.2分，4点多分的时候，显示的是半颗星vue中用的是svg实现，所以用的是占比的形式,可以有一点点的星






2.微信实现...

			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					10-18
				

			

		

		

			
				
今天小编就为大家分享一篇解决Vue2.0中使用less给元素添加背景图片出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
vue 根据分辨率自动调整css背景图片

				
			

			

				

					lemon今天学习了吗？的博客
				

				

					06-06
					
					946
					
				

			

		

		

			
				
一、场景：在不同的分辨率下使用同一张图片会出现拉伸或者压缩等变形情况，通常设计师会做两张图去适应1920和1440的分辨率，根据给定的图片对应不同分辨率显示。

			
		

	



		

			
		



	

		

			

				
					
vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...

				
			

			

				

					weixin_39646084的博客
				

				

					12-20
					
					1416
					
				

			

		

		

			
				
用vue-cli3脚手架新建的项目，在使用less设置背景图片的时候遇到了路径报错问题，该如何正确设置背景图片的路径？项目目录如下：现在在css文件中有一个全局样式common.less。使用的是images的一张图片icon.png。common.less是通过vue.config.js里面全局这样引用的，如下代码：pluginOptions: {'style-resources-loader'...

			
		

	





	

		

			

				
					
【vue】less配置图片

				
			

			

				

					Meditation_Crazy 
				

				

					08-13
					
					1362
					
				

			

		

		

			
				
less配置图片
参考文章：https://blog.youkuaiyun.com/qq_39695266/article/details/107693890
实现步骤
首先，创建file.less文件；

其次，在页面里面先通过相对路径配好图片的地址；

然后，把../../../../public/img这块路径复制到file.less的变量中；

最后，把页面中的图片地址替换为file.less中的变量。

页面样式


...

			
		

	





	

		

			

				
					
引用bg-image（），Vue组件引入less文件，图片路径问题

				
			

			

				

					qq_39273455的博客
				

				

					03-26
					
					4502
					
				

			

		

		

			
				
引用bg-image（）
1.引用bg-image书写前要加下图的点号，不然会报错
2.icon和&.后面的class为同一标签的class

Vue组件引入less文件，图片路径问题
less函数存放和使用文件位置介绍

错误写法

这样写，在m-header文件中直接相对m-header文件位置调用logo图片会报路径错误的 .bg-image(‘logo’)
正确写法

注意：
1....

			
		

	





	

		

			

				
					
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

				
			

			

				

					01-18
				

			

		

		

			
				
即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。   此时，只用import在main.js中导入variables.less文件是会报错的。 解决办法： 1、安装less和less-loader  npm i less less-loader -...

			
		

	





	

		

			

				
					
在VUE style中使用data中的变量的方法

				
			

			

				

					10-15
				

			

		

		

			
				
首先，我们要解决的问题是如何在`style`标签中使用`data`或`props`中的变量。以下是一个简单的步骤：  1. **HTML 结构**：  在HTML模板中，我们通常定义一个组件，并通过`props`传递需要的属性。例如：  ```html    ...

			
		

	





	

		

			

				
					
vue实现树形结构样式和功能的实例代码

				
			

			

				

					10-16
				

			

		

		

			
				
在介绍如何使用Vue实现树形结构样式和功能时，我们首先要了解树形结构在前端界面中是如何体现的。树形结构通常用来表示有层级关系的数据，比如文件系统的目录结构，组织架构图等。在Web开发中，树形控件允许用户以...

			
		

	





	

		

			

				
					
less使用小结

				
			

			

				

					github_39274378的博客
				

				

					07-26
					
					226
					
				

			

		

		

			
				
编译 background缩写加e(‘/’)



background: url(../img/dial-del.png) 0 0 e('/') 24px 16px no-repeat;

less的继承



@import "variable.less";

less写mixin方法



.bg-image(@url) {
  background-image: url("@{url}@2...

			
		

	





	

		

			

				
					
利用less实现多主题切换（配合天气现象）

				
			

			

				

					cnailili的博客
				

				

					09-08
					
					1143
					
				

			

		

		

			
				
创建src/assets/style/variables.less 		使用 @XXX:var(–XXX,‘style’)   声明系列变量，之后添加其他变量直接增加即可（由于之后要配置颜色，默认值可以先给" "）也可以声明一下常用的class，方便全局使用（这里已.backgroundCard 为例）原理：先给body元素添加style，再根据天气现象动态更改style。

			
		

	





	

		

			

				
					
vue条件样式 设置背景为图片自适应大小

				
			

			

				

					wnk1997的博客
				

				

					08-30
					
					3626
					
				

			

		

		

			
				
class前面加冒号，然后css分别写两种样式即可。

			
		

	





	

		

			

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

					
热门推荐

				
			

			

				

					杨小柒的博客
				

				

					10-09
					
					3万+
					
				

			

		

		

			
				
做的换肤效果比较简单，只是顶部导航背景色的改变。下面是效果图。 
首先，先说一下我最初的思路。我最初的想法是使用less定义变量，然后通过js来切换变量，通过切换的变量来达到换肤的效果。我先新建了一个 theme.less文件，代码如下：    @theme:@themea;
    @themea:pink;
    @themeb:blue;
    @themec:gray;如我最开始的想法，

			
		

	





	

		

			

				
					
vue项目实战（个人博客）五------使用媒体查询实现响应式设计

				
			

			

				

					guoang
				

				

					09-01
					
					1万+
					
				

			

		

		

			
				
使用媒体查询
@media only screen and (min-width: 768px) 加载css样式的最小屏幕宽度
@media only screen and (max-width: 768px)加载css样式的最大屏幕宽度
/** 平板 **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

...

			
		

	





	

		

			

				
					
CSS 使用calc()获取当前可视屏幕高度

				
			

			

				

					weixin_30657541的博客
				

				

					07-03
					
					779
					
				

			

		

		

			
				
来自：https://blog.youkuaiyun.com/qq_32063079/article/details/89766442

先了解一下CSS3的相对长度单位(参考详细教程) ：
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em ==...

			
		

	





	

		

			

				
					
Vue使用less

				
			

			

				

					叶才鑫
				

				

					01-25
					
					5605
					
				

			

		

		

			
				
在建好的vue项目中：

第一步：

安装less依赖，npm install less less-loader --save

第二步：

修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
{

test: /\.less$/,

loader: "style-loader!css-loader!less-load

			
		

	





	

		

			

				
					
vue less 切换主题（皮肤）

				
			

			

				

					ellynxu的博客
				

				

					01-14
					
					2444
					
				

			

		

		

			
				
记录一下基于vue和less的项目是咋切换主题的。这个方法适用于已经在代码里到处都是less全局变量或mixins，想让每个变量在不同主题下有不同的值的情况。不兼容ie

就以一个颜色举例：假设我已经在项目里使用了很多次@dark1-background: #141414，这个全局变量已经被存放在variables.less里

1. 写一个theme.css用于存放所有主题的所有样式，不同主题下@dark1-background所代表的颜色不同


.dark-theme {
  --dark1-ba..

			
		

	





	

		

			

				
					
如何在JavaScript中获取屏幕，窗口和网页大小

				
			

			

				

					qq_43327962的博客
				

				

					12-05
					
					2373
					
				

			

		

		

			
				
浏览器的各种尺寸是javaScript中比较容易混淆的概念，下面我会在本文中解释这些概念并且通过具体示例告诉大家如何访问它们。
屏幕
屏幕尺寸

屏幕尺寸是屏幕的宽度和高度：显示器或移动屏幕。window.screen是保存屏幕尺寸信息的对象。


screen.width：屏幕的宽。
screen.height：屏幕的高。

可用屏幕尺寸


可用的屏幕大小由活动屏幕的宽度和高度组成，没有操作系统工具栏。



screen.availWidth：可利用的宽，等于屏幕的宽。


screen.availH

			
		

	





	

		

			

				
					
vue2报错未知伪选择器 'v-deep'

					
最新发布

				
			

			

				

					03-28
				

			

		

		

			
				
好的，我现在需要解决用户在Vue2中遇到的'v-deep'伪选择器报错问题。首先，我得回顾一下Vue2中深度作用选择器的用法。用户提到使用/deep/时控制台警告说这个组合器不再被支持，将来会被移除，这应该是因为CSS规范的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值