如何使用角度媒体查询更改组件的动态宽度
Posted
技术标签:
【中文标题】如何使用角度媒体查询更改组件的动态宽度【英文标题】:how to change dynamic width of component using media query in angular 【发布时间】:2021-07-05 16:26:18 【问题描述】:我重复使用一个组件两次,但它们的宽度不同
<card-component [width]="50px">
<card-component [width]="30px">
//in card-component
@Input() public width: any;
<div [style.width]="width">
</div>
我想更改这两个组件的宽度(分配不同的宽度),以使其使用媒体查询在不同的屏幕尺寸上做出响应。我怎样才能控制单个组件。
【问题讨论】:
【参考方案1】:我认为有更好的方法可以做到这一点,例如为每个卡片组件使用包装 div 并使用 css 管理该 div 宽度,但您可以使用监听组件中屏幕宽度调整大小的 hostlistener 事件来实现。 ts
@HostListener('window:resize', ['$event'])
onResize(event)
// for example
this.innerWidth = window.innerWidth / 3 + 'px';
这个在component.html中
<!-- for example... -->
<card-component [width]="innerWidth">
<card-component [width]="innerWidth">
<card-component [width]="innerWidth">
https://***.com/a/45350792/9764641
【讨论】:
这是为每个卡片组件分配相同的宽度,我想要分配不同的宽度 您可以为每个组件设置不同的变量,并在 onResize(event)... 中设置值以上是关于如何使用角度媒体查询更改组件的动态宽度的主要内容,如果未能解决你的问题,请参考以下文章
在给定特定宽度范围的情况下使用 jquery 更改类名(媒体查询)
使用 JavaScript 检测动态媒体查询而不在脚本中硬编码断点宽度?