问题描述及分析:layui弹窗的宽高不是铺满屏幕的,是在屏幕中间,而做了自适应的页面采用是vw单位,正常情况是自适应的页面的宽根据浏览器窗口的宽度自适应,但是应为layui弹窗的ifame是设置了固定宽高的,此时ifarme页面引入自适应页面后,自适应页面获取到的html,body的宽高不是浏览器的而是layui的iframe,所以会出现自适应页面会缩小的情况。
解决方法:自适应页面的根元素设置字体大小为20px,代码如下:
第一步:
html{
font-size: 20px;
};
第二步:
自适应页面样式的vw单位全换成rem;
第三步:
屏幕显示分辨率的兼容,采用媒体查询
@media screen and (max-width: 1600px) {
html{
font-size: 16px;
};
}