vue 中h5页面自适应的实现

最新推荐文章于 2024-10-03 09:52:24 发布
最新推荐文章于 2024-10-03 09:52:24 发布
阅读量2.6k 收藏 13
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29236119/article/details/112620932
版权

有时候我们为了前端页面可以匹配不同分辨率的屏幕，会使用rem来对页面进行布局，无论基础px值设置得多么好计算，在写rem数值的时候，都需要对设计图原始的px值进行一番换算。

当当当当，来介绍一下两个好朋友，postcss-pxtorem 和 lib-flexible ，安装配置这两个依赖，我们就可以实现我们想要的功能啦。

1、首先，我们先来安装包：

npm install amfe-flexible --save-dev
npm install postcss-pxtorem --save-dev

2、在main.js中引入lib-flexible

import 'amfe-flexible';

3、配置postcss-pxtorem
首先找到.postcssrc.js文件，增加以下内容：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  summer88221
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue项目屏幕自适应_vue项目h5 屏幕自适应

				
			

			

				

					weixin_28987735的博客
				

				

					12-24
					
					1844
					
				

			

		

		

			
				
1、安装lib-flexiblenpm i lib-flexible -D2、在main.js中引入import 'lib-flexible/flexible'3、在index.html文件中设置meta标签:4、然后在项目中写css时会自动将rem转化为px,需要安装px2rem这个工具npm i px2rem-loader -D5、修改配置文件5.1 有build文件夹/build/util....

			
		

	



                

            
              



	

		

			

				
					
vue写h5页面的方法总结

				
			

			

				

					10-17
				

			

		

		

			
				
Vue编写H5页面的方法不仅能够带来开发效率的提升，还能通过现代前端技术实现优秀的用户体验。下面详细分析使用Vue.js编写H5页面的方法以及需要注意的关键点。  首先，当获取到设计师提供的UI设计稿后，前端工程师...

			
		

	



              


  
              

                


	

		

			

				
					
vue移动端html5页面根据屏幕适配的四种解决方法

				
			

			

				

					10-17
				

			

		

		

			
				
在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下

			
		

	





	

		

			

				
					
Vue H5（手写）实现下拉刷新

					
最新发布

				
			

			

				

					m0_73035846的博客
				

				

					10-03
					
					542
					
				

			

		

		

			
				
当我们在做移动端的时候 ，经常会遇到订单列表或者首页，经常会遇到下拉刷新 ，但是我经常用到 Vant 组件库中的下拉刷新 ，但是Vant 中的下拉刷新 会有一些问题  就是刷新的时候，在将页面象上滑动 ，就会出现卡顿的状态 ，这样就会导致用户体验非常不好  ，偶然看到一个博主写的一篇文章 还挺好用的  我就拿来试一试  真的还可以。2. 我们在 main.js 中 进行全局的注册和引入 这样就不会在 每个页面中 都要引入了。3. 我们创建一个 Scroll.vue 文件夹。这样就可以实现下拉刷新了。

			
		

	



		

			
		



	

		

			

				
					
vue移动端适配（vue-cli 3/4）

				
			

			

				

					哈哈哈，呜呜呜
				

				

					10-11
					
					2834
					
				

			

		

		

			
				
目录项目场景：问题描述：原因分析：解决方案：
项目场景：
Vue项目H5页面，只要求适配移动端（vue 2.6 + @vue/cli 4.5.13）

问题描述：
以前做的 vue-cli 2.x 移动端适配我是用  lib-flexible + px2rem-loader ，然后这次 @vue/cli 4 用了它就不灵了，发现刷新页面样式缩小了，我擦。。。

原因分析：
后来翻阅了一些文档，由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本

			
		

	





	

		

			

				
					
vue h5自适应屏幕

				
			

			

				

					m0_50864962的博客
				

				

					07-04
					
					800
					
				

			

		

		

			
				
h5 屏幕尺寸自适应

			
		

	





	

		

			

				
					
vue移动端5页面根据屏幕适配的四种方案

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					10-20
					
					5267
					
				

			

		

		

			
				
原文http://www.cnblogs.com/web1/p/9812669.html

最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有两个方法可以适用。

方法一：引入淘宝开源的可伸缩布局方案

引入淘宝开源的可伸缩布局方案： http...

			
		

	





	

		

			

				
					
vue写h5自适应js代码

				
			

			

				

					oneya1的博客
				

				

					03-15
					
					1154
					
				

			

		

		

			
				
3.注册窗口大小改变事件监听器以及pageshow事件监听器，当窗口尺寸发生变化或页面重新加载时，会自动调整字体大小和rem基准值。4.提供了两个工具函数：D.rem2px(d)用于将rem单位转换为px单位，D.px2rem(d)用于将px单位转换为rem单位。1.根据设备屏幕宽度、设备像素比等信息动态设置根元素（通常为html）的字体大小，并以此为基础计算rem单位的实际尺寸。2.创建或修改页面中的meta viewport标签以控制页面缩放比例。

			
		

	





	

		

			

				
					
手机自适应H5炫酷登陆页面.7z

				
			

			

				

					08-03
				

			

		

		

			
				
本文将深入探讨“手机自适应H5炫酷登录页面”这一主题，揭示其背后的技术实现与应用价值。  首先，H5，全称为HTML5，是超文本标记语言的最新版本，它为网页带来了更丰富的交互性和多媒体功能。H5在移动设备上的表现...

			
		

	





	

		

			

				
					
vue3 实现 H5 砸金蛋 中大奖

				
			

			

				

					07-06
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用Vue3框架来构建一个H5移动端的“砸金蛋”小游戏。Vue3是目前非常流行的前端JavaScript框架，它以其高效、易学和灵活的特性受到开发者的喜爱。结合H5技术，我们可以创建出交互性强、...

			
		

	





	

		

			

				
					
vue-cli  H5自适应解决方案

				
			

			

				

					weixin_30690833的博客
				

				

					08-16
					
					149
					
				

			

		

		

			
				
需要安装依赖包  lib-flexible postcss-pxtorem
在main.js 引入 lib-flexible


postcss-pxtorem

在.postcssrc.js 文件中添加


"postcss-pxtorem": {
"rootValue": 75, // 对根元素大小进行设置
"unitPrecision": 5, // 转换...

			
		

	





	

		

			

				
					
VUECLI3适配H5应用的框架采用px自动转vw的方式

				
			

			

				

					08-12
				

			

		

		

			
				
VUE CLI3适配H5应用的框架，采用px自动转vw的方式

			
		

	





	

		

			

				
					
vite+vue3的H5项目自适应屏幕适配完美实践

				
			

			

				

					IamKangDi的博客
				

				

					02-14
					
					2559
					
				

			

		

		

			
				
如果引入了UI组件，会强制的把组件的px给改掉，selectorBlackList: [‘van-’]属性可以指定不转换为视窗单位的类名，例如vantUI组件所有类名都是以van-开头的，就不会将组件的宽度改变啦。2.我的UI设计稿宽度是375，所以viewportWidth 设置为375，会自动转换为vw，项目介绍 vite+vue3+js的项目，vue2应该也是能用的，自己试下。1.安装自适应插件postcss-px-to-viewport。

			
		

	





	

		

			

				
					
vue页面自适应

				
			

			

				

					TZ1284063988的博客
				

				

					06-30
					
					553
					
				

			

		

		

			
				
直接上代码！
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>|
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</

			
		

	





	

		

			

				
					
移动端h5页面自适应

				
			

			

				

					qq_41867900的博客
				

				

					01-30
					
					2909
					
				

			

		

		

			
				
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。在做h5项目的时候，不同的手机型号和屏幕的大小，有时候会产生不同的效果，但是也不能为了每一个手机重新写一个代码，所以在编写整个项目之前，可以做一些处理，让页面可以根据不同的型号进行屏幕的自适应。方法一：meta  viewport。方法三：@media。

			
		

	





	

		

			

				
					
vue移动端h5页面根据屏幕适配的四种方案

				
			

			

				

					ForeverMyheart的博客
				

				

					11-22
					
					3964
					
				

			

		

		

			
				
最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。

方法一：引入淘宝开源的可伸缩布局方案

引入淘宝开源的可伸缩布局方案：https://github.com/amfe/lib-flexible（此处可点击）

淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始

			
		

	





	

		

			

				
					
Vue3（开发h5适配）

				
			

			

				

					qq1195566313的博客
				

				

					08-27
					
					8593
					
				

			

		

		

			
				
在开发移动端的时候需要适配各种机型，有大的，有小的，我们需要一套代码，在不同的分辨率适应各种机型。因此我们需要设置meta标签移动设备具有各种不同的屏幕尺寸和分辨率，例如智能手机和平板电脑。为了提供更好的用户体验，网页需要根据设备的屏幕宽度进行自适应布局。如果不设置，移动设备会按照默认的视口宽度（通常是较宽的桌面屏幕）来渲染网页，导致网页内容在移动设备上显示不正常，可能出现内容被截断或需要水平滚动的情况然后我们实现一个经典的圣杯布局。

			
		

	





	

		

			

				
					
H5自适应

				
			

			

				

					chuyaonong6148的博客
				

				

					06-05
					
					281
					
				

			

		

		

			
				
第一步：在网页代码的头部，加入一行viewport元标签 
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no" /> 
 ...

			
		

	





	

		

			

				
					
vue h5适配

				
			

			

				

					weixin_44348138的博客
				

				

					08-20
					
					672
					
				

			

		

		

			
				
移动项目适配方案
最近公司接手一个H5项目，重构后一直说我的页面有问题，后来发现前期公司搭建项目时没有做适配，后来通过查找资料，找到了一套如何将px自动转为rem适配的方案
1. 先安装插件lib-flexible
npm i lib-flexible -S

2. 在main.js中引入lib-flexible
import 'lib-flexible/flexible'

3.安装px2rem...

			
		

	





	

		

			

				
					
全平台兼容的H5自适应适配方案

				
			

			

				

					
				

			

		

		

			
				
这通常通过媒体查询（Media Queries）在CSS中实现，它允许开发者为不同屏幕宽度的设备定义不同的样式规则。  3. 元素自适应：在自适应布局中，元素需要根据浏览器的可视区域大小来调整其大小和位置。这包括图片、...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值