大餐中的手机和桌面页面的样式如何分配？

发布于 2025-02-04 00:55:39 字数 353 浏览 1 评论 0原文

我需要将大餐中不同的.CSS文件拆分为根据设备的页面中的标题中的一个。但是我可以知道仅在我的.Razor页面上询问了哪种类型的设备：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        isMobile = await JsRuntime.InvokeAsync<bool>("isMobile");
        await generateCaptcha();
    }
}

我可以将剃须刀页面的样式包含在标题上吗？还是我还能使用哪些其他方法来解决它？

原文

I need to split styles by different .css files in Blazor to only one of them includes in header depending device's page. But I can know which type of device is asked my page only on my .razor page:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        isMobile = await JsRuntime.InvokeAsync<bool>("isMobile");
        await generateCaptcha();
    }
}

Can I include styles from my razor page to header? Or what other methods can I use for resolve it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

且行且努力 2025-02-11 00:55:40

您已经从组件中调用JS，只需添加，更改或删除任何DOM元素即可。您的另一个选项可能是动态更改CSS内容whit @import

@import 'sm.css' screen and (max-width: 768px);
@import 'md.css' screen and (max-width: 992px) and (min-width: 769px);
@import 'lg.css' screen and (max-width: 1024px) and (min-width: 993px);
@import 'xl.css' screen and (max-width: 1336px) and (min-width: 1025px);
/*and many other options - and only screen, and (orientation: landscape)*/

You are already calling js from your component, you can just add, change or remove any dom element from there. Another option for you may be to dynamically change the CSS content whit @import

@import 'sm.css' screen and (max-width: 768px);
@import 'md.css' screen and (max-width: 992px) and (min-width: 769px);
@import 'lg.css' screen and (max-width: 1024px) and (min-width: 993px);
@import 'xl.css' screen and (max-width: 1336px) and (min-width: 1025px);
/*and many other options - and only screen, and (orientation: landscape)*/

回复收藏 0 原文

~没有更多了~