h5做APP TV(电视端APP vue框架)

资料来源：网络整理时间：2023/2/14 0:45:14 共计：3634 浏览

先px转rem,然后把psd上传蓝湖,把尺寸改为750的图纸,按照上面的尺寸来写代码

1、安装px2rem-loader

npm install px2rem-loader

2、配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：


	
		
		
			
			
				
				
					const cssLoader = {
				

			

		

		
			
			
				
				
					loader: 'css-loader',
				

			

		

		
			
			
				
				
					options: {
				

			

		

		
			
			
				
				
					minimize: process.env.NODE_ENV === 'production',
				

			

		

		
			
			
				
				
					sourceMap: options.sourceMap
				

			

		

		
			
			
				
				
					}
				

			

		

		
			
			
				
				
					}
				

			

		

		
			
			
				
				
					//这段代码是需要添加的
				

			

		

		
			
			
				
				
					const px2remLoader = {
				

			

		

		
			
			
				
				
					loader: 'px2rem-loader',
				

			

		

		
			
			
				
				
					options: {
				

			

		

		
			
			
				
				
					remUnit: 75
				

			

		

		
			
			
				
				
					}
				

			

		

		
			
			
				
				
					}

在generateLoaders方法中添加px2remLoader

const loaders = [cssLoader,px2remLoader]

3、改蓝湖上psd尺寸，改为750，这样设计出来的页面是不影响代码的

根据分辨率，改变页面font-size大小，目的是适配电视各种大屏


	
		
		
			
			
				
				
					window.onresize = setHtmlFontSize;
				

			

		

		
			
			
				
				
					function setHtmlFontSize() {
				

			

		

		
			
			
				
				
					const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
				

			

		

		
			
			
				
				
					const htmlDom = document.getElementsByTagName('html')[0];
				

			

		

		
			
			
				
				
					console.log(htmlWidth)
				

			

		

		
			
			
				
				
					htmlDom.style.fontSize = htmlWidth / 10 + 'px';
				

			

		

		
			
			
				
				
					};
				

			

		

		
			
			
				
				
					setHtmlFontSize();

要注意一点，数据渲染，不能用vue-resource，打包成APP将请求不到数据，请用axios，如何把vue项目打包成APP，将在https://blog.csdn.net/weixin_44088739/article/details/91532480文章里面具体描述

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：h5（HBuilderX+mui）开发App | ·下一条：.NET MVC5专题（IIS管道模型HttpModule事件详解）