tv端h5_h5做APP TV(电视端APP vue框架)

先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文章里面具体描述

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！