Question

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

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

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

除此之外，我在哪里将样式表链接放在Angular中？通常它放在index.html中但在Angular样式中列出了component.ts文件，这里我不能做 media =＆＃34;屏幕和（min-device-width：800px ）＆＃34; 部分，再次，我该如何解决这个问题？

Answer 1

在.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内添加样式链接。

Answer 2

如果我做得对，你只想加载所需的移动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>

这不会响应它只会工作一次。它也没有经过测试，因此无法按预期工作：）

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

2 个答案: