Blazor对于移动和桌面页面之间分离样式的最佳实践是使用CSS媒体查询。在这种情况下，您可以使用@media指令和max-width属性来设置不同的样式。例如，请考虑以下示例：

@media (max-width: 768px) { .myClass { font-size: 14px; } }

@media (min-width: 769px) { .myClass { font-size: 18px; } }

在这个示例中，我们在屏幕宽度小于等于768像素（移动设备）时设置一个font-size，而在屏幕宽度大于768像素（桌面设备）时设置另一个font-size。

在Blazor应用中，您可以将这些样式添加到全局CSS文件中，或为特定组件的CSS文件中。例如：

//global.css @media (max-width: 768px) { .myClass { font-size: 14px; } }

@media (min-width: 769px) { .myClass { font-size: 18px; } }

//MyComponent.razor.css @media (max-width: 768px) { .myClass { color: red; } }

@media (min-width: 769px) { .myClass { color: blue; } }

最后，您可以将这些样式应用于您的组件或HTML元素。例如：

在这个例子中，样式将根据屏幕大小而改变，从而使移动和桌面页面之间的样式得到分离。