由于某种原因,媒体查询不适用,它对于任何其他类都可以正常工作,我只对这个类有问题
我尝试过,仅删除屏幕等。没有一个有效
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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
.button2- 有一个点意味着您正在寻找具有类button2的元素。但在您的 HTML 结构中,我没有看到具有该名称的类。尝试下面的代码,这会查找 id show-image-button
的元素@media only screen { #show-image-button { width: 100%; } }