如何使用JavaScript和CSS网格使RadWindow根据屏幕/视口大小做出响应

我一直在寻找一种解决方案，使Telerik RadWindow能够响应地工作。有两件事需要响应，RadWindow中的内容和RadWindow本身

问题：

---

Per“RadWindow不支持响应大小更改，也不会根据视口自动更改大小，因为无法严格定义此类场景中的行为”

解决方案：（RadWindow内的内容需要响应，RadWindow本身也需要响应）

RadWindow内容： 在本例中，我使用CSS网格使RadWindow的内容具有响应性

        .sectionSearch {
            display: grid;
            grid-gap: 3px;
            grid-template-columns: repeat(auto-fit, 200px);
            align-items: end;
            max-width: 809px;
        }

RadWindow响应性：

视口可以设置为每篇文章屏幕的百分比。然后，您可以使用JavaScript媒体查询根据屏幕大小调整视口高度和宽度的百分比

通过对一些帖子（包括一篇）的组合和修改，下面的示例解决方案满足了我制作RadWindow的需要

          var $ = $telerik.$;
        var radwindow;

        function pageLoad() {
            radwindow = $find("<%= radwindow.ClientID%>");
        }

        $(window).resize(function () {
            if (radwindow.isVisible()) {
                setWindowsize();
            }
        });

        function setWindowsize() {

            //var viewportWidth = $(window).width();
            //var viewportHeight = $(window).height();

            /* ==================================================== */

            // media query event handler
            if (matchMedia) {
                var mqls = [ // array of media queries
                    window.matchMedia("(min-width: 0px) and (max-width: 399px)"),
                    window.matchMedia("(min-width: 400px) and (max-width: 600px)"),
                    window.matchMedia("(min-width: 600px) and (max-width: 800px)"),
                    window.matchMedia("(min-width: 800px) and (max-width: 1000px)"),
                    window.matchMedia("(min-width: 1000px) and (max-width: 4000px)")
                ]

                for (i = 0; i < mqls.length; i++) { // loop though media queries
                    mqls[i].addListener(WidthChange); // listen for queries
                    WidthChange(mqls[i]); // call handler func at runtime
                }
            }

            // media query change
            function WidthChange(mql) {

                if (mqls[0].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 90 / 100));
                } else if (mqls[1].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 60 / 100));
                } else if (mqls[2].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 40 / 100));
                } else if (mqls[3].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 40 / 100));
                } else if (mqls[4].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 70 / 100), Math.ceil(viewportHeight * 45 / 100));
                }
            }
                radwindow.center();
            }

var$=$telerik.$；
雷达窗口；
函数pageLoad（）{
radwindow=$find（“”）；
}
$（窗口）。调整大小（函数（）{
if（radwindow.isVisible（））{
setWindowsSize（）；
}
});
函数setWindowsSize（）{
//var viewportWidth=$（窗口）.width（）；
//var viewportHeight=$（窗口）.height（）；
/* ==================================================== */
//媒体查询事件处理程序
如果（匹配媒体）{
var mqls=[//媒体查询数组
window.matchMedia（（（最小宽度：0px）和（最大宽度：399px）），
window.matchMedia（“（最小宽度：400px）和（最大宽度：600px）”，
window.matchMedia（“（最小宽度：600px）和（最大宽度：800px）”，
window.matchMedia（（（最小宽度：800px）和（最大宽度：1000px）），
window.matchMedia（（最小宽度：1000px）和（最大宽度：4000px）
]
对于（i=0；i

检查此演示：。它将根据屏幕尺寸自动调整radwindow的大小，即radwindow大小将自动调整为移动设备的较小屏幕尺寸。链接中的第一个按钮在某种程度上复制了响应性，但不像下面的解决方案那样将radwindow置于屏幕中央。其他两个按钮没有像下面的解决方案那样复制响应能力。谢谢你的链接！正如我所注意到的，它确实居中。但是，在手机上，如果窗口打开时地址栏消失，则您的评论是正确的。智能手机具有突然删除地址栏的功能。如果你让智能手机上的地址栏可见，它就会居中。试试这个新的演示：。即使地址栏消失了，它也会在android上居中。