记公司项目中数字大屏适配4K大屏的问题

记公司项目中数字大屏适配4K大屏的问题

在接手的时候，前端页面已经开发完成，div高度与宽度是百分比，所以适配问题不用考虑宽高问题，但字体边距等没有统一单位，要求适配4k屏

首先4k屏的宽高是3840*2160

有以下几种思路作参考

1. 媒体查询，在public的index.html文件里设置根元素大小来适配

利用

@media screen and (min-width:3100px){

font-size：32px

}

@media screen and (max-width:1930px){

font-size：16px

}

通过媒体查询设置根元素大小，在页面所有含有px的位置，包括边距等全部改为rem，可以作为一种适配思路。缺点：太多地方需要修改，即使改完页面，框架布局仍然需要修改，比较麻烦。好处：一劳永逸，真正实现适配，不会出现下面的一些稀奇古怪的问题。

2.媒体查询，在public的index.html文件里设置transform:scale()利用css实现整体的放大与缩小

@media screen and (min-width:3100px){

body{

display:flex;

alime-items:center;

justify-content:center

}

transform:scale(2,2.227)

}

@media screen and (max-width:1930px){

body{

display:block

}

transform:scale(1,1)

}

tips：1.因为在浏览器打开是1920*964并非是1920*1080，所以不是scale(2,2)

2.因为在设置scale之后在返回到正常浏览器页面时会出现适配问题，不适合开发时来回切换，所以需要设置scale(1,1)【这里就有后面一个坑，这里说明dom节点仍然是元素原来，并不会因为scale的设置变成我们所看见的样子，获取的仍然是原来的元素】

出现的问题：

1. 在经历过scale之后，原来的页面的css中有的地方使用的是vh，现在不适用统一改成px可以适配
2. scale之后因为使用的是scale（2,2.227），导致页面宽高放大比例不等，页面上的元素会被在纵向上拉长，文字体现并不明显，而图片很明显。
3. 这里需要着重提出一个点就是全屏问题，通过一个页面上的一个dom节点来点击全屏或恢复，这里是一位前辈使用的是screenfull插件，使用及其简单，通过获取dom节点之后，在设置标志位后利用判断语句实现需求，但同时也造成一个很严重的问题，就是获取的dom元素仍然是原来的元素，并不是scale之后的元素（但也确实应该如此），此时似乎走进了死胡同，但在我的不懈努力下，突然想起zoom属性也可以放大，可不可以在获取dom节点之后再让他放大，改变它的dom，事实上scale不能改变原来的元素，所以在尝试后并没有效果，但在使用了zoom属性后，确确实实拿到了放大之后的dom，screenfull插件完美运行（这一段是自己理解的）。

doucument.element.......body(获取dom的方法).style.zoom=2

1. 解决上述问题后，页面近乎完成，但是有一个问题是ant组件库的select选择框在经历scale之后出现options下拉框不显示的问题。

为解决这一问题，查了许多资料，一种说法是z-index层级不够高需要把select选择框改为z-index：9999（因为modal的z-index是9998），使用后没效果，还一种说法是因为select选择框是渲染在body上，造成了遮盖（听着挺靠谱，因此在antd文档中的select下面有一个属性是类似于此如下图）但在添加之后仍然无法出现

1. 媒体查询，在public的index.html文件里设置zoom利用css实现整体的放大与缩小

@media screen and (min-width:3100px){

zoom:2

}

事实上使用了该方法后几乎没有碰到上面许多坑爹问题，甚至于在全屏之前都不需要对dom节点进行操作，不需要在加zoom:2。这里就感觉zoom确实改变了dom节点。

唯一的缺点：不兼容火狐浏览器，（无语）