layui弹窗ifarme引入自适应页面（vw）样式缩小

问题描述及分析：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;};}

layui弹窗ifarme引入自适应页面（vw）样式缩小相关推荐

dwcc怎么设置html默认,Dreamweaver CC2018写div自适应页面布局的教程
Dreamweaver CC2018怎么写div自适应页面布局?一般网页都是固定的宽度,所以不能自适应网页窗口大小.我们可以把宽度设置为百分比,这样就可以啦.只不过需要自己算好百分比的数值,接下来小编 ...
百度ueditor自适应(编辑器自适应页面，图片上传宽高，等)
1.编辑器自适应页面在实例化编辑器时加上 initialFrameWidth:'100%',//初始化编辑器宽度代码  <script id=& ...
/* 触发弹层 */(layui弹窗)
测试48种layui弹窗 <div class="layui-fluid" id="LAY-component-layer-list"><di ...
[html] 页面导入样式时，使用link和@import有什么区别？
[html] 页面导入样式时,使用link和@import有什么区别? 区别: 1.link是HTML标签,@import是css提供的. 2.link引入的样式页面加载时同时加载,@import引入 ...
页面css样式找不到问题
出现了一个页面没有样式的问题: 问题: 1.路径不对, 可以打开页面f12看样式是否找到检查路径是否正确. 2.样式没引全或者没引对. 查看引入的样式是否正确或缺少样式. 3.路径明明写对了却404 ...
【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )
文章目录一.CSS 引入方式 - 内嵌样式 1.内嵌样式语法 2.内嵌样式示例 3.内嵌样式完整代码示例 4.内嵌样式运行效果一.CSS 引入方式 - 内嵌样式 1.内嵌样式语法 CSS 内嵌样式 ...
移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题，我和小伙伴们惊呆了...
## **css常用技巧** 本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 1. **实现组件的自动换行排布:** flex-wrap: wrap; 使列表 ...
css常用样式，导致页面css样式混乱的原因，css遇到的问题，我和小伙伴们惊呆了
css常用技巧本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 实现组件的自动换行排布: flex-wrap: wrap;使列表排成一行方法一:div{di ...
thymeleaf页面中引入公共页面
一.前言当我们在html页面使用thymeleaf时,经常会遇到这样的情况.有一些html片段在我们所有页面都存在,造成了代码重复.遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用 ...

layui弹窗ifarme引入自适应页面（vw）样式缩小

layui弹窗ifarme引入自适应页面（vw）样式缩小相关推荐

最新文章

热门文章