vue大屏可视化：4k带鱼屏、4k、2k、1920*1080、笔记本 全适配方案

已于 2024-09-04 09:19:06 修改
阅读量677 收藏 1
点赞数 6
文章标签： vue.js javascript 前端 大屏可视化适配方案 大屏可视化 echarts
于 2024-09-03 15:53:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43770056/article/details/141863885
版权

 本方案采用的是媒体查询的方法来实现的

css媒体查询书写（可按照自己需求新增）不同尺寸下显示不同的文字大小图片大小等：

// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {}
// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {}
// 2K
@media screen and (max-width: 2560px) {}
// 全高清屏幕
@media screen and (max-width: 1920px) {}
// 14寸笔记本
@media screen and (max-width: 1366px) {}

 页面ecahrts字体大小和样式采用计算属性计算：

// 计算样式
const computedSize = computed(() => {
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    let objFun = {};

    // 14寸笔记本
    if (clientWidth <= 1366) {
        console.log("14寸笔记本")
        objFun.fontSize = 12; //文字大小
        objFun.symbolSize = 3; //节点大小
        objFun.borderWidth = 1; //线条宽度
        objFun.itemWidth = 12; //legend方块宽度
        objFun.itemHeight = 5; //legend方块高度
        objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "25%",
            left: "2%",
            right: "2%",
        };
    } // 全高清屏幕
    else if (clientWidth <= 1920) {
        console.log("全高清屏幕")
        objFun.fontSize = 15; //文字大小
        objFun.symbolSize = 5; //节点大小
        objFun.borderWidth = 2; //线条宽度
        objFun.itemWidth = 20; //legend方块宽度
        objFun.itemHeight = 8; //legend方块高度
        objFun.padding = [0, 55, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "25%",
            left: "2%",
            right: "2%",
        };
    }// 2K
    else if (clientWidth <= 2560) {
        console.log("2K")
        objFun.fontSize = 18; //文字大小
        objFun.symbolSize = 10; //节点大小
        objFun.borderWidth = 3; //线条宽度
        objFun.itemWidth = 25; //legend方块宽度
        objFun.itemHeight = 10; //legend方块高度
        objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "20%",
            left: "2%",
            right: "2%",
        };
    }
     // 4K 带鱼屏
     else if (clientWidth <= 3840 && clientHeight <= 1080) {
        console.log("4K 带鱼屏")
        objFun.fontSize = 20; //文字大小
        objFun.symbolSize = 15; //节点大小
        objFun.borderWidth = 5; //线条宽度
        objFun.itemWidth = 24; //legend方块宽度
        objFun.itemHeight = 15; //legend方块高度
        objFun.padding = [0, 60, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "28%",
            left: "2%",
            right: "2%",
        };
    }
    // 4K
    else if (clientWidth <= 3840 && clientHeight >= 1080) {
        console.log("4K尺寸")
        objFun.fontSize = 30; //文字大小
        objFun.symbolSize = 20; //节点大小
        objFun.borderWidth = 5; //线条宽度
        objFun.itemWidth = 40; //legend方块宽度
        objFun.itemHeight = 20; //legend方块高度
        objFun.padding = [0, 150, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "18%",
            left: "2%",
            right: "2%",
        };
    } 

    return objFun;
});

初始化echarts的时候直接使用：

// 初始化echarts
function initChart(myData8, tss, dcl) {
    const chartDom = document.getElementById('echarts2');
    chart = proxy.$echarts.init(chartDom);
    // let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];
    let option = {
        // backgroundColor: "#041D3F",
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(0, 255, 233,0)",
                            },
                            {
                                offset: 0.5,
                                color: "rgba(255, 255, 255,1)",
                            },
                            {
                                offset: 1,
                                color: "rgba(0, 255, 233,0)",
                            },
                        ],
                        global: false,
                    },
                },
            },
            textStyle: {
                color: "#fff",
                fontSize: computedSize.value.fontSize, // 设置字体大小
            },
            confine: true, // 限制溢出屏幕外
            backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色
            padding: [10, 10, 10, 10], // 设置方框的内边距
        },

        grid: computedSize.value.grid,

        legend: {
            show: true,
            right: 0,
            top: 0,
            itemWidth: computedSize.value.itemWidth,
            itemHeight: computedSize.value.itemHeight,
            icon: 'rect',
            // itemGap: 20, // 调整图例项之间的水平间距
            textStyle: {
                color: '#fff',
                fontSize: computedSize.value.fontSize,
                // 设置上下居中对齐
                align: 'center',
                // verticalAlign: 'middle',
                // color: "#B6DCF5",
                // padding: [0, 0, 0, 4],
            },
        },
        xAxis: {
            data: myData8,
            axisLabel: {
                interval: 0,
                show: true,
                fontSize: computedSize.value.fontSize,
                color: "#B6DCF5",
            },
            axisLine: {
                show: true,
                lineStyle: {
                    show: true,
                    color: "rgba(54, 153, 255, .4)",
                },
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: [
            {
                name: "单位：KJ",
                type: "value",
                nameTextStyle: {
                    color: "#B6DCF5",
                    fontSize: computedSize.value.fontSize,
                    align: "center",
                    padding: [0, 0, 0, 0],
                },
                // splitNumber: 5,
                axisLabel: {
                    show: true,
                    fontSize: computedSize.value.fontSize,
                    color: "#B6DCF5",
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#7FD6FF",
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(54, 153, 255, .4)",
                        type: "dashed",
                    },
                },
            }, {
                name: "单位：吨",
                // offset: -25,
                type: "value",
                nameLocation: "end",
                nameGap: 10, // 控制名称和轴之间的距离
                nameTextStyle: {
                    color: "#B6DCF5",
                    fontSize: computedSize.value.fontSize,
                    align: "center",
                    padding: computedSize.value.padding,
                },
                // splitNumber: 5,
                axisLabel: {
                    show: true,
                    fontSize: computedSize.value.fontSize,
                    color: "#B6DCF5",
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#7FD6FF",
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(54, 153, 255, .4)",
                        type: "dashed",
                    },
                },
            }
        ],
        series: [
            {
                name: "能耗",
                type: "line",
                showSymbol: true,
                symbolSize: computedSize.value.symbolSize, //方块大小
                symbol: "circle",
                lineStyle: {
                    normal: {
                        color: "#FF8E3C",
                        width: computedSize.value.borderWidth, //线条宽度
                    },
                },
                itemStyle: {
                    color: "#FF8E3C",
                    // borderColor: "#fff",
                    borderWidth: 2,
                },
                data: tss, // 折线图的数据
            },
            {
                name: "吞吐量",
                type: "line",
                showSymbol: true,
                symbol: "circle",
                symbolSize: computedSize.value.symbolSize,
                lineStyle: {
                    normal: {
                        color: "#00A0E9",
                        width: computedSize.value.borderWidth, //线条宽度
                    },
                },
                itemStyle: {
                    color: "#00A0E9",
                    // borderColor: "#fff",
                    borderWidth: 2,
                },
                data: dcl, // 折线图的数据
            },
            // {
            //     name: "已处理",
            //     type: "line",
            //     showSymbol: true,
            //     symbolSize: 8,
            //     symbol: "circle",
            //     lineStyle: {
            //         normal: {
            //             color: "#02D6B0",
            //         },
            //     },
            //     itemStyle: {
            //         color: "#02D6B0",
            //         borderColor: "#fff",
            //         borderWidth: 2,
            //     },
            //     data: ycl, // 折线图的数据
            // },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);

    window.addEventListener('resize', function () {
        chart.resize();
    });

}

另外可以加上 监听到页面尺寸变化后刷新页面：

onMounted(() => {
    window.addEventListener("resize", () => {
        window.location.reload();
    });
})

vue+echarts其中一个组件完整写法：

// 装卸能耗分析
<template>
    <div class="all">
        <div class="all_title">
            <span class="all_title_txt">装卸能耗分析</span>
            <img class="dateBg" src="../../assets/images/dateBg.png" alt="" oncontextmenu="return false"
                draggable="false">
        </div>
        <div class="all_bod" id="echarts2"></div>
    </div>
</template>

<script setup name="box8">
const { proxy } = getCurrentInstance();
import { ref, reactive, watch, onMounted, onUnmounted, nextTick } from "vue";
// let currentIndex = ref(0)
let chart = ref(null);
let timer = ref(null);


const props = defineProps({
    allData: {
        type: Object,
        required: true
    }
});

// 监听 allData 的变化
watch(() => props.allData, (newVal) => {

    console.log("echarts8接收到值", newVal)

    let myData8 = [];
    let tss = [];
    let dcl = [];

    // let myData8 = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
    // let tss = [60, 80, 20, 40, 60, 40, 50, 50, 60, 32, 52, 55, 60];
    // let dcl = [40, 55, 50, 60, 30, 20, 60, 30, 20, 10, 30, 20];

    newVal.forEach(item => {
        myData8.push(item.time)
        tss.push(item.energyConsumption)
        dcl.push(item.thruput)
    })

    setTimeout(() => {
        initChart(myData8, tss, dcl)
    }, 500)

});


// window.addEventListener('resize', function () {
//     // const innerWidth = window.innerWidth
//     // const innerHeight = window.innerHeight
//     // console.log("resize", computedSize.value.fontSize)
//     chart.resize();
// });

onUnmounted(() => {
    if (timer.value) clearInterval(timer.value);
})

// 计算样式
const computedSize = computed(() => {
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    let objFun = {};

    // 14寸笔记本
    if (clientWidth <= 1366) {
        console.log("14寸笔记本")
        objFun.fontSize = 12; //文字大小
        objFun.symbolSize = 3; //节点大小
        objFun.borderWidth = 1; //线条宽度
        objFun.itemWidth = 12; //legend方块宽度
        objFun.itemHeight = 5; //legend方块高度
        objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "25%",
            left: "2%",
            right: "2%",
        };
    } // 全高清屏幕
    else if (clientWidth <= 1920) {
        console.log("全高清屏幕")
        objFun.fontSize = 15; //文字大小
        objFun.symbolSize = 5; //节点大小
        objFun.borderWidth = 2; //线条宽度
        objFun.itemWidth = 20; //legend方块宽度
        objFun.itemHeight = 8; //legend方块高度
        objFun.padding = [0, 55, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "25%",
            left: "2%",
            right: "2%",
        };
    }// 2K
    else if (clientWidth <= 2560) {
        console.log("2K")
        objFun.fontSize = 18; //文字大小
        objFun.symbolSize = 10; //节点大小
        objFun.borderWidth = 3; //线条宽度
        objFun.itemWidth = 25; //legend方块宽度
        objFun.itemHeight = 10; //legend方块高度
        objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "20%",
            left: "2%",
            right: "2%",
        };
    }
    // 4K 带鱼屏
    else if (clientWidth <= 3840 && clientHeight <= 1080) {
        console.log("4K 带鱼屏")
        objFun.fontSize = 20; //文字大小
        objFun.symbolSize = 15; //节点大小
        objFun.borderWidth = 5; //线条宽度
        objFun.itemWidth = 24; //legend方块宽度
        objFun.itemHeight = 15; //legend方块高度
        objFun.padding = [0, 60, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "28%",
            left: "2%",
            right: "2%",
        };
    }
    // 4K
    else if (clientWidth <= 3840 && clientHeight >= 1080) {
        console.log("4K尺寸")
        objFun.fontSize = 30; //文字大小
        objFun.symbolSize = 20; //节点大小
        objFun.borderWidth = 5; //线条宽度
        objFun.itemWidth = 40; //legend方块宽度
        objFun.itemHeight = 20; //legend方块高度
        objFun.padding = [0, 150, 0, 0]; //右侧单位距离右侧距离
        objFun.grid = {
            containLabel: true,
            bottom: "6%",
            top: "18%",
            left: "2%",
            right: "2%",
        };
    }

    return objFun;
});


// 初始化echarts
function initChart(myData8, tss, dcl) {
    const chartDom = document.getElementById('echarts2');
    let chart = proxy.$echarts.init(chartDom);
    // let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];
    let option = {
        // backgroundColor: "#041D3F",
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(0, 255, 233,0)",
                            },
                            {
                                offset: 0.5,
                                color: "rgba(255, 255, 255,1)",
                            },
                            {
                                offset: 1,
                                color: "rgba(0, 255, 233,0)",
                            },
                        ],
                        global: false,
                    },
                },
            },
            textStyle: {
                color: "#fff",
                fontSize: computedSize.value.fontSize, // 设置字体大小
            },
            confine: true, // 限制溢出屏幕外
            backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色
            padding: [10, 10, 10, 10], // 设置方框的内边距
        },

        grid: computedSize.value.grid,

        legend: {
            show: true,
            right: 0,
            top: 0,
            itemWidth: computedSize.value.itemWidth,
            itemHeight: computedSize.value.itemHeight,
            icon: 'rect',
            // itemGap: 20, // 调整图例项之间的水平间距
            textStyle: {
                color: '#fff',
                fontSize: computedSize.value.fontSize,
                // 设置上下居中对齐
                align: 'center',
                // verticalAlign: 'middle',
                // color: "#B6DCF5",
                // padding: [0, 0, 0, 4],
            },
        },
        xAxis: {
            data: myData8,
            axisLabel: {
                interval: 0,
                show: true,
                fontSize: computedSize.value.fontSize,
                color: "#B6DCF5",
            },
            axisLine: {
                show: true,
                lineStyle: {
                    show: true,
                    color: "rgba(54, 153, 255, .4)",
                },
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: [
            {
                name: "单位：KJ",
                type: "value",
                nameTextStyle: {
                    color: "#B6DCF5",
                    fontSize: computedSize.value.fontSize,
                    align: "center",
                    padding: [0, 0, 0, 0],
                },
                // splitNumber: 5,
                axisLabel: {
                    show: true,
                    fontSize: computedSize.value.fontSize,
                    color: "#B6DCF5",
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#7FD6FF",
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(54, 153, 255, .4)",
                        type: "dashed",
                    },
                },
            }, {
                name: "单位：吨",
                // offset: -25,
                type: "value",
                nameLocation: "end",
                nameGap: 10, // 控制名称和轴之间的距离
                nameTextStyle: {
                    color: "#B6DCF5",
                    fontSize: computedSize.value.fontSize,
                    align: "center",
                    padding: computedSize.value.padding,
                },
                // splitNumber: 5,
                axisLabel: {
                    show: true,
                    fontSize: computedSize.value.fontSize,
                    color: "#B6DCF5",
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#7FD6FF",
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(54, 153, 255, .4)",
                        type: "dashed",
                    },
                },
            }
        ],
        series: [
            {
                name: "能耗",
                type: "line",
                showSymbol: true,
                symbolSize: computedSize.value.symbolSize, //方块大小
                symbol: "circle",
                lineStyle: {
                    normal: {
                        color: "#FF8E3C",
                        width: computedSize.value.borderWidth, //线条宽度
                    },
                },
                itemStyle: {
                    color: "#FF8E3C",
                    // borderColor: "#fff",
                    borderWidth: 2,
                },
                data: tss, // 折线图的数据
            },
            {
                name: "吞吐量",
                type: "line",
                showSymbol: true,
                symbol: "circle",
                symbolSize: computedSize.value.symbolSize,
                lineStyle: {
                    normal: {
                        color: "#00A0E9",
                        width: computedSize.value.borderWidth, //线条宽度
                    },
                },
                itemStyle: {
                    color: "#00A0E9",
                    // borderColor: "#fff",
                    borderWidth: 2,
                },
                data: dcl, // 折线图的数据
            },
            // {
            //     name: "已处理",
            //     type: "line",
            //     showSymbol: true,
            //     symbolSize: 8,
            //     symbol: "circle",
            //     lineStyle: {
            //         normal: {
            //             color: "#02D6B0",
            //         },
            //     },
            //     itemStyle: {
            //         color: "#02D6B0",
            //         borderColor: "#fff",
            //         borderWidth: 2,
            //     },
            //     data: ycl, // 折线图的数据
            // },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);

    let index = 0; // 初始化索引 

    // 使用定时器定时更新 tooltip 数据
    if (timer.value) clearInterval(timer.value);

    timer.value = setInterval(() => {
        chart.dispatchAction({
            type: "showTip", // 触发 tooltip 显示
            seriesIndex: 0, // 触发 tooltip 的系列索引
            dataIndex: index, // 触发 tooltip 的数据索引
        });
        index = (index + 1) % myData8.length; // 更新索引，循环显示数据
    }, 2000); // 每隔 2 秒更新一次 

    // 鼠标移入暂停轮播
    chart.on("mouseover", () => {
        clearInterval(timer.value);
        timer.value = null;
    });

    // 鼠标移出继续轮播
    chart.on("globalout", () => {
        if (timer.value) { clearInterval(timer.value); }
        timer.value = setInterval(() => {
            chart.dispatchAction({
                type: "showTip", // 触发 tooltip 显示
                seriesIndex: 0, // 触发 tooltip 的系列索引
                dataIndex: index, // 触发 tooltip 的数据索引
            });
            index = (index + 1) % myData8.length; // 更新索引，循环显示数据
        }, 2000); // 每隔 2 秒更新一次
    });

    window.addEventListener('resize', function () {
        chart.resize();
    });

}






</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    -ms-user-select: none;
}

.all {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    // border: 1px solid red;

    // background-color: pink;
    .all_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // padding: 0 40px;
        padding-right: 20px;
        width: 100%;
        // height: 44px;
        color: #A5D8FC;
        font-size: 16px;
        background: url("../../assets/images/smallTitBg.png") no-repeat;
        background-size: 100% 100%;

        // span {
        //     transform: translateY(-8px);
        // }

        .dateBg {
            // width: 25px;
            // height: 25px;
            cursor: pointer;

            &:hover {
                opacity: .8;
            }
        }
    }

    .all_bod {
        display: flex;
        flex-flow: column;
        width: 100%;
        // height: calc(100% - 44px);
    }


}

// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {
    .all_title_txt {
        font-size: 35px;
        transform: translate(80px, -20px);
    }

    .today_tit {
        font-size: 30px;
    }

    .all_title {
        height: 80px;
    }

    .all_bod {
        height: calc(100% - 80px) !important;
    }

    .dateBg {
        width: 45px;
        height: 45px;
        transform: translateY(-10px);
    }
}

// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {
    .all_title_txt {
        font-size: 50px;
        transform: translate(80px, -20px);
    }

    .today_tit {
        font-size: 50px;
    }

    .all_title {
        height: 100px;
    }

    .all_bod {
        height: calc(100% - 100px) !important;
    }

    .dateBg {
        width: 55px;
        height: 55px;
        transform: translateY(-15px);
    }
}

// 2K
@media screen and (max-width: 2560px) {
    .all_title_txt {
        font-size: 35px;
        transform: translate(70px, -20px);
    }

    .today_tit {
        font-size: 32px;
    }

    .all_title {
        height: 100px;
    }

    .all_bod {
        height: calc(100% - 100px) !important;
    }


    .dateBg {
        width: 40px;
        height: 40px;
        transform: translateY(-15px);
    }
}

// 全高清屏幕
@media screen and (max-width: 1920px) {
    .all_title_txt {
        font-size: 16px;
        transform: translate(30px, -10px);
    }

    .today_tit {
        font-size: 16px;
    }

    .all_title {
        height: 50px;
    }

    .all_bod {
        height: calc(100% - 50px) !important;
    }

    .dateBg {
        width: 25px;
        height: 25px;
        transform: translateY(-5px);
    }
}

// 14寸笔记本
@media screen and (max-width: 1366px) {
    .all_title_txt {
        font-size: 14px;
        transform: translate(30px, -10px);
    }

    .today_tit {
        font-size: 16px;
    }

    .all_title {
        height: 50px;
    }

    .all_bod {
        height: calc(100% - 50px) !important;
    }

    .dateBg {
        width: 20px;
        height: 20px;
        transform: translateY(-5px);
    }
}
</style>

web网页精选
关注
CSS响应式设计如何适配不同屏幕尺寸？
Marthaondon的博客
04-13 862
在当今数字化时代，各种屏幕尺寸的设备层出不穷，从桌面电脑到平板电脑，再到智能手机，每种设备都有其独特的屏幕尺寸和分辨率。然后，我们逐步增加屏幕尺寸和分辨率的条件，为平板和桌面设备优化布局和样式。通过将容器设定为网格容器，并定义网格的行和列，我们可以将子元素放置在网格的任意位置，实现复杂的布局效果。例如，我们可以为手机设备设定一个较小的字体大小，为平板设备设定一个适中的字体大小，而为桌面设备设定一个较大的字体大小。通过组合多个媒体查询，我们可以为不同屏幕尺寸的设备设定不同的样式规则，实现精细化的响应式设计。
1080P、2k、4k、帧、fps等概念区别
辰兮要努力
05-16 4万+
你好我是辰兮，很高兴你能来阅读，因为最近想买一个相机了，所以简短的学习了一下常见相关参数知识，通俗易懂的整理下来分享给小白。 文章目录一、序言二、1080p（1920×1080）三、2K（2560x1440）四、4k（4096×2160）五、帧，帧数，帧率，和fps区别 一、序言 关于常看见相机的参数中几P和几K是什么 P是逐行扫描，几P就是纵向有多少行像素，例如，1080p就是纵向有1080行像素 纵行看 “几K”的原始定义是：横向大约有几个1024列（等效）像素，1K就是1024，2K就是204.
2024年前端最全前端大屏适配几种方案_前端大屏适配方案，2024年最新Web前端高级面试framework
最新发布
2401_84411822的博客
05-13 3075
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端大屏适配几种方案
muzidigbig的博客
03-13 4584
缺点：1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。通过监听浏览器窗口的大小，来改变scale的比例，从而实现数据大屏适配。（百度、网易等大数据适配的解决方案均是这个）我们整个大屏的尺寸设置和设计图一样，只是通过css的scale放大缩小属性，来控制实际展示的大小。方案二：scale（缩放）强烈推荐。空白的部分用背景图片填充就好了。1920*1080的设计稿。
CSS3响应式布局中，如何适配不同屏幕和设备？
derickForster的博客
04-18 839
然而，随着技术的不断发展和设备的不断更新换代，我们也需要不断学习和探索新的技术和方法，以适应不断变化的市场需求。在完成响应式布局的设计和实现后，我们需要对不同设备和屏幕尺寸进行充分的测试和调试，以确保页面能够正确地显示和交互。它通过使用媒体查询（Media Queries）和流式布局（Fluid Layouts）等技术，根据设备的屏幕尺寸、分辨率和方向等特性，自动调整页面布局、字体大小、图片尺寸等元素，以确保页面在不同设备上都能够良好地显示和交互。来自：www.yangzhie288.com。
Vue中rem适配多分辨率大屏可视化屏幕
qq_30907143的博客
09-16 2675
vue可视化项目中使用rem适配不同分辨率屏幕
vue大屏可视化demo
01-25
vue大屏可视化demo 使用方法： # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
Vue大屏可视化案例资源
05-29
在“Vue大屏可视化案例资源”中，我们可以深入学习如何利用Vue.js进行大屏数据可视化的开发，这对于那些希望提升Vue技能并对此领域感兴趣的人来说是一份宝贵的资料。 在大屏可视化领域，主要目标是将复杂的数据以...
【源码】数据可视化：基于 Echarts + Vue 实现的大屏范例15-世界人口统计大屏.zip
10-18
标题中的“【源码】数据可视化：基于 Echarts + Vue 实现的大屏范例15-世界人口统计大屏”表明这是一个使用Echarts图表库和Vue.js前端框架创建的数据可视化项目，具体应用在构建一个展示世界人口统计信息的大屏界面...
基于Vue的数据可视化大屏设计源码
04-11
本源码提供了一个基于Vue的数据可视化大屏设计。项目包含27个文件，其中包括9个Vue文件、6个JavaScript文件、3个JSON文件、2个SVG文件、1个Gitignore文件、1个Markdown文档、1个HTML文件、1个TTF文件和1个JPG图片。...
vue大数据可视化（大屏展示）解决方案
01-08
一个基于 vue、datav、Echart 框架的大数据可视化（大屏展示）模板，最近更新了详细的介绍说明，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由...
vue 适配大屏解决方案
TomNumber的博客
06-17 3754
1、使用 postcss-px2rem 在main.js 中引用rem.js 2、使用postcss-px2rem+lib-flexible 此时宽度用px就可以适配所以的网页大小了，高度也可以使用px去做自适应，但是前提是html,body等父元素的设置上100%，不然里面的元素写100%无法继承高度但是需要注意的是行内样式设置的px无法被转换成自适应的rem 需要注意的点：lib-flexible给body元素加上了12px的字体大小，官方解释：body上设置12 * dpr的font-size
vue数据大屏分辨率自适应（包括echarts内部自适应）
VVVVV
03-18 2992
echarts内部屏幕大小自适应 参考文章：echarts自适应问题，echarts中怎么改变字体单位实现自适应 写一个换算函数 //当前视口宽度 let nowClientWidth = document.documentElement.clientWidth; //换算方法 function nowSize(val,initWidth=1920){ return val * (nowClientWidth/initWidth); } 在echarts有关大小的地方进行使用 lege
vue项目屏幕自适应_vue项目PC端随屏幕分辨率与窗口大小自适应（五步完成，吐血干货）...
weixin_34650199的博客
12-24 9285
又见面了鸭！前言：这是用webpack创建的项目【壹】不同屏幕分辨率效果展示：A、1920*1080分辨率全屏显示的情况下：image.pngB、1600*900分辨率全屏显示的情况下：image.pngC、1024*768分辨率全屏显示的情况下：image.png【贰】不同浏览器窗口缩放时的效果展示：A、正常浏览窗口显示：image.pngB、缩放浏览窗口显示：image.png【叁】上述HTM...
Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)
u011097323的专栏
04-03 3万+
最近在用VUE写大屏页面，遇到屏幕自适应问题，根据设计的尺寸，在各种屏幕尺寸下自适应，经过几天摸索，终于达到了效果，希望为还在这问题困扰的提供点帮助 1. 在配置文件设置大屏设计的尺寸1920*1080 //appConfig.js export default{ screen:{ width:1920, height:1080 }//大屏设计...
vue尺寸的自适应 大屏自适应
weixin_48789376的博客
08-03 6642
我在一些大屏的项目中，碰见自己电脑写好的样式，但是在大屏中出现了变形。后来在经过百度，可以通过postcss-px2rem 插件，实现项目的自适应 使用： ** 1、安装包** npm install postcss-px2rem px2rem-loader --save 2、文件创建 在src目录下创建一个util的工具文件夹，然后创建一个js文件，这里我叫pxtorem.js，文件中写上一下代码 // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函
vue实现PC端分辨率适配
热门推荐
韩大璐
07-25 12万+
依赖 项目基础配置使用 vue-cli 生成 自适应方案核心： 阿里可伸缩布局方案 lib-flexible px转rem：px2rem，它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后，进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loade...
前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏
weixin_43915406的博客
10-09 1万+
提示：前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网页精选

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值