如何在 Angular 中使用不同的样式表支持不同的屏幕尺寸？答案

【问题标题】：How can I support different screen sizes with different stylesheets in Angular?如何在 Angular 中使用不同的样式表支持不同的屏幕尺寸？
【发布时间】：2018-07-19 05:06:43
【问题描述】：

我正在使用 Angular 5，目前正在制作标题，当我将屏幕大小调整为移动分辨率时，设计变得非常难看。我的想法是制作两种不同的样式表，一种用于移动设备，一种用于 PC，如下所示：

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

这是解决问题的明智方法吗？如果没有，请给我一个替代方案。

除此之外，我应该将样式表链接放在 Angular 中的什么位置？通常它放在 index.html 中，但在 Angular 样式中，component.ts 文件中列出了，这里我不能这样做 media="screen and (min-device-width: 800px)" 部分，那么我该如何解决这个问题？

【问题讨论】：

stackoverflow.com/questions/41772691/… ?
@Quentin 谢谢，这解释了如何放置样式表，但我的另一个问题是，这是解决问题的有效方法吗？
这不是 Stack Overflow 的主题问题，因为它主要是基于意见的。
@JessedeBruijne 不一定，如果我的方法只是一个巨大的解决方法，它效率不高。
同意@Mike - 根据我的经验，“标准”方式是使用媒体查询根据屏幕大小有条件地加载样式，并将媒体查询包含在核心样式表中。跨度>

标签： html css angular stylesheet angular5

【解决方案1】：

如果我做对了，您只想为移动设备加载所需的 css，而不是加载所有的 css（桌面也是如此），对吗？如果是这样，你必须在你的 index.html 中定义一个脚本

<script>
    var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
    //use this if you want to check it is really a mobile device.
    var isAndroid = navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio;

    var cssHref = deviceWidth > 800 ? "app_desktop.css" : "app_mobile.css";
    var linkElement = document.createElement("link");
    linkElement.setAttribute("rel",  "stylesheet");
    linkElement.setAttribute("type",  "text/css");
    linkElement.setAttribute("href",  cssHref);
<script>

这不会是响应式的，它只会工作一次。它也没有经过测试，所以它不会按预期工作:)

【讨论】：

【解决方案2】：

在您的.angular-cli.json 文件中，您应该将一个字符串添加到apps.styles 数组。

例如，当您的 mobile.css 和 tablet.css 位于 app 文件夹中时，只需添加：mobile.css 和 tablet.css。
例如，当样式位于 styles 文件夹内（在 app 内）时，添加：styles/yourstyle.css

根据您的 css 文件添加媒体查询。

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

您不需要在index.html 中添加样式链接。

【讨论】：

谢谢！我是否也将@media 部分放入 .angular-cli.json 中？
您应该将它们放在样式表中。请阅读以下 MDN documentation，更具体的是 here，第二段。
谢谢，我现在明白了。