媒体查询 & Angular Material

Question

即使我们使用 angular material 开发响应式应用程序，有人能帮我理解媒体查询的重要性吗？我们还需要担心吗？ material 不帮我们处理吗？

Answer 1

是也不是。

无需创建自己的媒体查询。

拥有响应式应用意味着主布局将处理 window 尺寸。主布局意味着您在列和行中思考。

要控制此响应行为，您可以使用 angular/flex。

首先：你必须通过

安装这个

npm install @angular/flex-layout -s

您将在此处找到文档和大量演示：angular/flex-layout and here: Demos

您可以试试这个：angular-project-generator。生成的项目种子使用 angular/flex 和 angular mat-sidenav.

如果您想编写自己的媒体查询，请不要使用 200px、300px 或 500px。尝试使用此处使用的相同值：Responsive API

default angular breakpoints:
  xs: begin: 0, end: 599.9px
  sm: begin: 600px, end: 959.9px
  md: begin: 960px, end: 1279.9px
  lg: begin: 1280px, end: 1919.9px
  xl: begin: 1920px, end: 4999.99px

在我的一些 angular 项目中，我使用了这个 scss，它生成了一些响应式助手类:

    @charset "UTF-8";

// see node_modules/@angular/flex-layout/_mq.scss

// Non-overlapping Material Design breakpoints
// @type map
$breakpoints: (
  xs: (
    begin: 0,
    end: 599.9px,
  ),
  sm: (
    begin: 600px,
    end: 959.9px,
  ),
  md: (
    begin: 960px,
    end: 1279.9px,
  ),
  lg: (
    begin: 1280px,
    end: 1919.9px,
  ),
  xl: (
    begin: 1920px,
    end: 4999.99px,
  ),
) !default;

// Overlapping breakpoints that are greater than defined
// Material Design breakpoints
// @type map
$overlapping-gt: (
  gt-xs: 600px,
  gt-sm: 960px,
  gt-md: 1280px,
  gt-lg: 1920px,
) !default;

// Overlapping breakpoints that are less than defined
// Material Design breakpoints
// @type map
$overlapping-lt: (
  lt-sm: 599.9px,
  lt-md: 959.9px,
  lt-lg: 1279.9px,
  lt-xl: 1919.9px,
) !default;

@mixin layout-bp($bp) {
  @if map-has-key($breakpoints, $bp) {
    $min: map-get(map-get($breakpoints, $bp), begin);
    $max: map-get(map-get($breakpoints, $bp), end);
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if map-has-key($overlapping-gt, $bp) {
    $min: map-get($overlapping-gt, $bp);
    @media (min-width: $min) {
      @content;
    }
  } @else if map-has-key($overlapping-lt, $bp) {
    $max: map-get($overlapping-lt, $bp);
    @media (max-width: $max) {
      @content;
    }
  }
}

$allkeys: map_keys(
  map_merge($breakpoints, map_merge($overlapping-gt, $overlapping-lt))
);

@each $key in $allkeys {
  @include layout-bp($key) {
    .ge-display-none-#{$key} {
      display: none !important;
    }
    .ge-display-block-#{$key} {
      display: block !important;
    }
    .ge-display-inline-#{$key} {
      display: inline !important;
    }
    .ge-padding-0-#{$key} {
      padding: 16px !important;
    }
    .ge-padding-16px-#{$key} {
      padding: 0 !important;
    }
    .ge-margin-0-#{$key} {
      margin: 16px !important;
    }
    .ge-margin-16px-#{$key} {
      margin: 0 !important;
    }
  }
}

你可以把scss代码放在这里看看生成的媒体查询：sassmeister

Answer 2

+添加到答案

是的，当然 Angular material 会处理它，但仅限于其组件的范围，而不是您创建的组件说可能是 button/Sliders 或者它可以是任何东西。

媒体查询基本上可以让您根据您对不同屏幕分辨率的选择来调整和自定义您的布局模板。例如，您希望在移动设备上 Material 按钮宽度应为 200px，在平板电脑上应为 300px，在桌面设备上应为 500px 等等，这可以使用媒体查询。

我希望这能解决您的许多问题。

媒体查询 & Angular Material

Media queries & Angular Material

media-queries

angular