如何制作一个带有@media查询功能的按钮

Question

当屏幕是移动尺寸时，我希望我的按钮使背景变暗。我该怎么做呢?

Answer 1

只需将样式类更改如下，并确保样式类位于媒体查询

工作的例子用不同的屏幕尺寸试试。

component.ts

clicked: boolean = false;
handleClick(event?: MouseEvent) {
if (event) { event.stopPropagation(); }
this.clicked = !this.clicked;
}

template.html

<div>
<button
class="btn"
[ngClass]="{'change-color': clicked}"
(click)="handleClick()"
>
Click me!
</button>
</div>

styles

css

.btn {
background-color: #4caf50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.change-color {
background-color: #f7e226;
}
@media screen and (min-width: 480px) {
.change-color {
background-color: #4caf50;
}
}