美文网首页
layer弹窗尺寸自适应屏幕

layer弹窗尺寸自适应屏幕

作者: 哎哟我去 | 来源:发表于2020-07-13 13:19 被阅读0次
layui.use(['layer','form', 'layedit'], function () {
    var $ = layui.jquery,
         layer = layui.layer;


// 判断页面大小,
        function screen() {
            //获取当前窗口的宽度
            var width = $(window).width();
            if (width > 1200) {
                return 3;   //大屏幕
            } else if (width > 992) {
                return 2;   //中屏幕
            } else if (width > 768) {
                return 1;   //小屏幕
            } else {
                return 0;   //超小屏幕
            }
        }


    layer.open({
        type: 1,
        title: ['弹出页面的标题', 'font-size:18px;'],  
        content: $("#content").val(),    // 弹窗内容
        area: screen() < 2 ? ['90%', '80%'] : ['600px', '900px'],   // 长,宽
        offset: '30%'            // 弹出的位置,还有很多其他属性,这里就不一一介绍了
    });
});

相关文章

  • layer弹窗尺寸自适应屏幕

  • 面试之屏幕适配

    一,屏幕尺寸适配 1.1布局匹配 布局元素自适应屏幕尺寸使用RelativeLayout,LinearLayout...

  • 104.PC官网适配移动端

    自适应:为了兼容不同的屏幕尺寸 响应式:不仅是兼容屏幕尺寸,还要兼顾样式上的等,包含的内容比自适应更多 因为是纯静...

  • 媒体查询_栅格系统

    Media Queries 自适应阶段 自从有了不同屏幕的尺寸,我们就开始尝试自适应了 居中 虽然不能让所有屏幕都...

  • 媒体查询

    Media Queries 自适应阶段 自从有了不同屏幕的尺寸,我们就开始尝试自适应了 居中 虽然不能让所有屏幕都...

  • 媒体查询

    自适应阶段 自从有了不同屏幕的尺寸,我们就开始尝试自适应了 居中 虽然不能让所有屏幕都自适应,但是可以利用居中让元...

  • 微信小程序 wxss样式

    1. 尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx...

  • 自适应网站

    什么是自适应网站? 指的是网页通过不同尺寸不同终端设备访问可以自适应显示,根据屏幕大小、宽度自动调整布局,自适应也...

  • 微信小程序尺寸单位rpx以及样式相关介绍

    微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750...

  • css技巧:防止页面加载图片时发生“抖动”

    一、问题场景 假设我们在一个页面中需要异步加载图片,图片尺寸不是固定的,而是自适应屏幕宽度的正方形。 由于屏幕尺寸...

网友评论

      本文标题:layer弹窗尺寸自适应屏幕

      本文链接:https://www.haomeiwen.com/subject/oeeacktx.html