В макетах сетки действительно имеют значение только соотношения (а не фактическое количество столбцов). В вашем случае соотношение между размерами плиток не меняется - первая плитка всегда в два раза шире, чем вторая и третья. Таким образом, вы можете математически уменьшить ваш мобильный макет до:
A- 6 (6/6)
B- 3 (3/6)
C- 3 (3/6)
Теперь значения тайла colspan
одинаковы для обоих макетов, единственная разница - количество столбцов. Это упрощает реализацию адаптивного дизайна, поскольку вам нужно всего лишь изменить значение cols
между 12 и 6.
Привязать входное значение cols
к выражению:
...
[ 1111] Используйте модуль компоновки CDK для обнаружения изменений устройства:
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;
});
}
...
}
Вы также можете настроить точку останова в зависимости от размера экрана:
breakpointObserver.observe([
'(max-width: 599px)'
]).subscribe(result => {
this.isMobile = result.matches;
});
Если Вы не хотите использовать командную строку или устанавливать инструменты, можно также сделать это олдскульным способом: