Aliaksei Kuncevič

Software Engineer/Angular Consultant

Responsive design

Responsive content

Responsive content

Media queries

Media query

// For desktop
@media only screen and (min-width: 768px) {
    .elem-1 { width: 8.33%; }
    .elem-2 { width: 16.66%; }
    .elem-3 { width: 25%; }
    .elem-4 { width: 33.33%; }
    .elem-5 { width: 41.66%; }
    .elem-6 { width: 50%; }
    .elem-7 { width: 58.33%; }
    .elem-8 { width: 66.66%; }
    .elem-9 { width: 75%; }
    .elem-10 { width: 83.33%; }
}
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px)  { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px)  { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px)  { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Angular Flex-Layout

The Flex Layout engine intelligently automates the process of applying appropriate Flexbox CSS to browser view hierarchies.

The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.

Flexbox css

Flexbox css

Angular Flex-Layout

npm i @angular/flex-layout
// OR
yarn add @angular/flex-layout

imports: [
  FlexLayoutModule.withConfig({useColumnBasisZero: false}),
],

Layout Example

  

    first-section
  
  

    second-section
  
  

    third-section
  

Layout Example

  

    first-section
  
  

    second-section
  
  

    third-section
  

6.0.0-beta.16

6.0.0-beta.16

With Beta 16, we have added support + API for CSS Grid. Now @angular/flex-layout supports both Flexbox and CSS Grid layouts.

Css grid layout

Css grid layout

NY

questions ?

@kuncevic