如何使用JavaScript和CSS Grid使基于屏幕/视口大小的RadWindow响应
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用JavaScript和CSS Grid使基于屏幕/视口大小的RadWindow响应相关的知识,希望对你有一定的参考价值。
我一直在寻找一种解决方案,让Telerik RadWindow响应性地工作。有两件事需要响应,RadWindow中的内容和RadWindow本身。
问题:
Per Telerik:“RadWindow不支持响应式大小更改,并且它不会根据视口自动更改大小,因为在这种情况下的行为无法严格定义”
答案
解决方案:( RadWindow内部的内容需要响应,RadWindow本身也是如此)
RadWindow内容:我使用CSS Grid在此示例中使RadWindow的内容响应。
.sectionSearch {
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fit, 200px);
align-items: end;
max-width: 809px;
}
RadWindow响应能力:
根据this文章,视口可以设置为屏幕的百分比。然后,您可以使用javascript媒体查询来调整视口高度和宽度的百分比,具体取决于屏幕的大小。
使用包括this one在内的几个帖子的组合和修改,下面的示例解决方案可以满足我对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();
}
以上是关于如何使用JavaScript和CSS Grid使基于屏幕/视口大小的RadWindow响应的主要内容,如果未能解决你的问题,请参考以下文章
CSS Grid Layout:如何使背景颜色跨越多个单元格?