Estou montando um aplicativo web, e quero implementar a versão mobile com responsividade.
Estou usando Angular 7 e material angular 7.2.
<mat-grid-list cols="12">
<mat-grid-tile [colspan]="6">
<h1 class="title">Title</h1>
</mat-grid-tile>
<mat-grid-tile [colspan]="3">
<h2 class="date">Date</h2>
</mat-grid-tile>
<mat-grid-tile [colspan]="3">
<h1 class="price">price€</h1>
</mat-grid-tile>
</mat-grid-list>
Eu tenho uma lista de grade com 12 colunas que contém 3 blocos:
A- 6 (6/12)
B- 3 (3/12)
C- 3 (3/12)
REDE
<-------- 12 -------->
AAAAAA BBB CCC
Quando obtiver o tamanho do telefone, desejo ter: uma lista de grade com 12 colunas que contém 3 blocos:
A- 12 (12/12)
B- 6 (6/12)
C- 6 (6/12)
MÓVEL
<-------- 12 -------->
AAAAAAAAAAAA
BBBBBB-Budap
Desculpe pelo meu inglês;) Obrigado
Em layouts de grade, apenas as proporções realmente importam (não as contagens de colunas reais). No seu caso, as proporções entre os tamanhos dos ladrilhos não mudam - o primeiro ladrilho é sempre duas vezes mais largo que o segundo e o terceiro ladrilhos. Assim, você pode reduzir matematicamente o layout do seu celular para:
A- 6 (6/6)
B- 3 (3/6)
C- 3 (3/6)
Agora, os colspan
valores dos blocos são os mesmos para ambos os layouts, a única diferença é o número de colunas. Isso simplifica a implementação de um design responsivo, porque você só precisa alterar o cols
valor entre 12 e 6.
Vincule a cols
entrada do valor a uma expressão:
<mat-grid-list [cols]="isMobile ? 6 : 12">...
Use o módulo Layout do CDK para detectar alterações no dispositivo:
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
...
class MyComponent {
public isMobile: boolean = false;
constructor(breakpointObserver: BreakpointObserver) {
breakpointObserver.observe([
Breakpoints.Handset
]).subscribe(result => {
this.isMobile = result.matches;
});
}
...
}
Você também pode personalizar o ponto de interrupção com base no tamanho da tela:
breakpointObserver.observe([
'(max-width: 599px)'
]).subscribe(result => {
this.isMobile = result.matches;
});
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras