根据UI图设计的大小换算REM单位以及大屏页面全屏展示

最新推荐文章于 2023-02-17 15:05:08 发布

WionWan

最新推荐文章于 2023-02-17 15:05:08 发布

阅读量1.8k

点赞数 2

分类专栏： HTML/浏览器/HTTP JavaScript 文章标签： rem 大屏

本文链接：https://blog.csdn.net/u012036171/article/details/99722725

版权

根据1366px的UI设计，需求要求适应更大的屏幕，包括字体和div宽度的适配。通过设置rem单位进行适配，CSS中采用Vue框架。对于大屏的竖向适配，使用vw和vh单位，以及百分比来确保设计图竖向1:1显示。同时，设定最小宽高，并提示用户使用全屏模式以获取最佳体验。

摘要由CSDN通过智能技术生成

需求：UI图设计的1366px，产品希望往大了适配，字体和div宽度都需要适配实际页面宽；

设置rem节点适配

例如设计的UI图尺寸是1366宽的，则正常页面往下滚动的是情况下，输入UI图设计的尺寸，可以是1366，也可以是1920 等；于是就用rem单位适配，根据根节点换算，关于单位相关的文章之前总结过：理解CSS常见的px/em/rem/vh/vw尺寸单位

以下代码运行框架是Vue；

// 初始化
let self = this;
window.onload = function() {
    /*1366代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    self.getRem(1366, 100);
};
self.getRem(1366, 100);
window.onresize = function() {
    self.getRem(1366, 100);
};


// 设计rem节点大小，等比例换算
getRem(pwidth, prem) {
            let html = document.documentElement;
            let oWidth = window.outerWidth ? window.outerWidth : screen.width;
            html.style.font