Angular 5中如何用不同样式表适配多屏幕？样式文件放何处？

嘿，我来帮你梳理下这个问题——我在Angular项目里处理响应式布局已经有挺多经验了，咱们一步步来：

首先，单独做移动端和PC端两个样式表不是最合理的方案，主要有这几个问题：

• 额外增加HTTP请求：加载两个样式表会比一个多一次请求，影响首屏加载速度
• 维护成本高：公共样式要在两个文件里同步修改，很容易出现遗漏或不一致
• 冗余代码：很多基础样式其实是通用的，拆分后会重复写

更优的替代方案 #

1. 单文件内嵌入媒体查询（最推荐） #

直接在同一个样式文件里用CSS媒体查询区分不同断点的样式，浏览器会自动根据当前屏幕尺寸应用匹配的规则，既集中维护又简洁：

/* PC端默认样式 */
.header {
  height: 80px;
  padding: 0 40px;
}

/* 移动端样式（屏幕宽度≤768px） */
@media screen and (max-width: 768px) {
  .header {
    height: 50px;
    padding: 0 15px;
  }
}

2. 使用预处理器（SCSS/SASS）优化媒体查询 #

如果项目用了SCSS，可以定义断点变量和混合宏，让响应式代码更整洁易维护：

$mobile-breakpoint: 768px;

@mixin mobile {
  @media screen and (max-width: $mobile-breakpoint) {
    @content;
  }
}

.header {
  height: 80px;
  padding: 0 40px;

  @include mobile {
    height: 50px;
    padding: 0 15px;
  }
}

3. Angular Flex Layout（进阶） #

如果需要更复杂的响应式布局，Angular Flex Layout库提供了一系列指令，能直接在模板里根据屏幕断点控制元素的显示和布局，减少CSS代码量：

<header fxLayout="row" fxLayoutAlign="space-between center" class="header">
  <!-- PC端显示的logo -->
  <img src="logo-large.png" fxShow fxHide.lt-md>
  <!-- 移动端显示的logo -->
  <img src="logo-small.png" fxHide fxShow.lt-md>
</header>

Angular的样式分为全局样式和组件样式，各自有明确的适用场景：

1. 全局样式 #

• 放在src/styles.scss（或styles.css）文件里，这是Angular默认配置的全局样式入口，所有组件都会继承这里的样式
• 你也可以在angular.json的styles数组里添加其他全局样式文件，比如第三方UI库的样式

2. 组件样式 #

• 每个组件对应的.component.scss（或.css）文件，在组件的@Component装饰器里通过styleUrls引入：

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})

• 组件样式默认是作用域化的，只会影响当前组件的元素，不会污染全局，非常适合写组件专属的响应式样式

你提到在component.ts里没法设置media="screen and (min..."——其实完全不需要这么做！直接在组件的样式文件里写媒体查询就可以了，Angular会自动处理样式的作用域，同时浏览器会根据屏幕尺寸应用对应的规则。比如在header.component.scss里写的媒体查询，只会作用于app-header组件内的元素，不会影响其他组件。

如果需要全局的响应式样式，就写在src/styles.scss里；如果是组件专属的响应式调整，就写在组件自己的样式文件里，这样分工清晰，维护起来也方便。

内容的提问来源于stack exchange，提问作者user8827176