按钮宽度 CSS 在移动设备上不会改变，但在桌面上很好
我正在尝试让按钮具有基于屏幕尺寸的响应宽度。我已经得到了它，所以当我调整常规 Chrome 窗口的大小时它可以完美地工作，但是当我切换显示以模仿设备（任何移动设备/ipad/等）时，按钮的宽度立即变得更小。即使我在 iPhone 上打开它，它看起来也是一样的，所以这不仅仅是 Chrome 工具的一些奇怪问题。当我检查该元素时，我可以看到宽度已被禁用：
我认为可能有一些 CSS 覆盖了它，但这并不能解释为什么当我只是调整 Chrome 的大小，甚至选择一个分辨率比我的任何规则更宽的设备时，这种行为就会完全消失。我仍然尝试删除所有 @media 规则，但该行为仍然存在。
该按钮是非常基本的 HTML，它甚至没有包含在可能导致问题的 div 中（除非它下面有一个弹性框可能是一个问题？）：
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
所有相关的 CSS 都在这里：
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
@media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
我也尝试过添加!important它，然后它确实适用于移动设备 - 但随后停止更改任何其他分辨率，并且始终停留在 40%。
胡说叔叔2回答
-
斯蒂芬大帝
我放弃了这个小项目，然后随机意识到我在做一些完全不同的事情时做错了什么 - 如果有人犯和我一样的错误，我会设法忘记设置视口。添加这个使得 CSS 工作：<meta name=viewport content="width=device-width, initial-scale=1"> -
拉风的咖菲猫
当您使用 @media 查询时，当括号内的“规则”被接受时，它会在其中执行任何操作。所以，如果你说 max-width:1000px 那么，如果你的浏览器是 600px 那么其中的任何内容都将适用，如果不是，那么它将被忽略。对于小于 600px 的屏幕，您正常的 @media css 规则将被接受，并且您所说的宽度：40%，并且您无法以％为单位进行测量。@media only screen and (max-width: 600px) { #ranking-button { width: 200px; }}
随时随地看视频慕课网APP
相关分类
Html5