Ich habe eine Schaltfläche hinzugefügt, aber aus irgendeinem Grund funktionieren Medienabfragen damit nicht

Question

Aus irgendeinem Grund funktioniert die Medienabfrage nicht, sie funktioniert für jede andere Klasse einwandfrei, ich habe nur ein Problem mit dieser Klasse

Ich habe es versucht, habe nur den Bildschirm usw. entfernt. Keiner von ihnen funktioniert

const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
  myImage.hidden = !myImage.hidden;
});

button2,
input[type=submit] {
  cursor: pointer;
}

button2,
input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

button2 {
  color: currentColor;
  overflow: visible;
  margin: 0
}

button2 {
  border-style: outset;
  line-height: 1.6;
  margin: 0 0 0px;
  text-align: center;
  line-height: 60px;
  max-width: 300px;
  border-radius: 10px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  position: relative;
  font-weight: 300;
  font-size: .85em;
  width: 100%;
}

So i want to make it to be width 100% on mobile @media only screen {
  .button2 {
    width: 100%;
  }
}

<button2 id="show-image-button">Méret Táblázat</button2>
<img id="my-image" src="https://cdn.shopify.com/s/files/1/2999/5106/files/True-to-Sole-nike-sneaker-sizechart_760x760.jpg?v=1611582903" hidden>

Answer 1

.button2 - 有一个点意味着您正在寻找具有类button2的元素。但在您的 HTML 结构中，我没有看到具有该名称的类。

尝试下面的代码，这会查找 id show-image-button

的元素

@media only screen {
  #show-image-button {
    width: 100%;
  }
}