layer弹出层根据浏览器窗口大小自适应页面

1，首先看一下layer是怎么使用弹出层的。

layui.use(['layer','form', 'layedit'], function () {
   var layer = layui.layer;
    layer.open({
        type: 1,
        title: ['请填写你的信息吧', 'font-size:18px;'],    // 弹出页面的标题
        content: $("#id"),    // 为要弹出层的id
        area: ['600px', '300px'],    // 长，宽
        offset: '30%'            // 弹出的位置，还有很多其他属性，这里就不一一介绍了
    });
});

解决方案一：当遇到这个问题时，第一想法就是不用具体的像素，用百分比，结果证明确实针对不同电脑端的浏览器可以，但是还不行，普通电脑浏览器都是横着的长方形的，但是手机浏览器是竖着的长方形，用百分比电脑适应了，手机端就不行了。

解决方案二：根据当前页面高度计算好以后，再填入高度。貌似可以，但是有点麻烦，而且我们弹出层本身就是在方法里面，再去做计算太复杂，且不够通用。

解决方案三：由方案二演化而来，根据页面当前高度长度，制定不同的弹出大小，代码如下。

写一个方法，判断页面大小
function screen() {
    //获取当前窗口的宽度
    var $ = layui.jquery;    // 这个是因为我没用jquery，layui自带jquery，需要声明下
    var width = $(window).width();
    if (width > 1200) {
        return 3;   //大屏幕
    } else if (width > 992) {
        return 2;   //中屏幕
    } else if (width > 768) {
        return 1;   //小屏幕
    } else {
        return 0;   //超小屏幕
    }
}

(1）$(window).width()需要引用jquery.js文件，它是jquery方法。而window.innerWidth是js方法，不需要引用jquery.js文件。
(2)  window.innerWidth获取当前窗口的宽度(包含滚动条)，$(window).width()获取当前窗口的宽度(不包含滚动条)。
(3)  window.innerWidth在IE8浏览器是无效的。

然后在需要弹出的地方这么使用：（重点在第6行）

layui.use(['layer','form', 'layedit'], function () {
   var layer = layui.layer;
    layer.open({
        type: 1,
        title: ['请填写你的信息吧', 'font-size:18px;'],    // 弹出页面的标题
        content: $("#id"),    // 为要弹出层的id
        area: screen() < 2 ? ['90%', '30%'] : ['600px', '250px'],   // 长，宽
        offset: '30%'            // 弹出的位置，还有很多其他属性，这里就不一一介绍了
    });
});

当遇到小页面时，也就是手机端，那么使用百分比形式的，当遇到电脑端的就用固定的大小。

经检测，基本满足使用场景。