MediaQuery概述
的Blazor的MediaQuery组件允许您在用户更改浏览器大小时作出反应。
MediaQuery组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
创建Blazor MediaQuery
在您的页面上使用TelerikMediaQuery:
- 添加
< TelerikMediaQuery >标签到你的剃须刀页。 - 设置
媒体的参数。CSS媒体查询被匹配。为每个媒体查询使用一个组件实例。 - 使用
OnChange事件来确定媒体是匹配的。
@*根据浏览器大小调整容器的大小*@ MediaQuery参数
参数
类型及默认值
描述
媒体字符串的媒体查询字符串这将被匹配。
笔记
MediaQuery组件有助于在c#代码中使用CSS媒体查询。这里有几点要记住:
MediaQuery组件并不是响应式设计、布局和CSS的替代品。您应该使用它们来创建响应式应用程序布局，就像任何其他web应用程序一样。
MediaQuery组件使得基于匹配的断点使用c#逻辑变得很容易——比如改变参数值，用不同的组件替换一个组件，甚至不呈现布局的一部分(仅使用CSS，你可以调整应用程序的部分大小或在视觉上隐藏它们，但它们仍然呈现)。
应用程序中的标志应该具有定义首选状态或布局的默认值。根据浏览器和媒体查询设置，可能没有OnChange事件将在应用程序初始化时触发，因此应用程序应该有一个合理的默认状态。
下一个步骤
另请参阅