我正在尝试让按钮具有基于屏幕尺寸的响应宽度。我已经得到了它，所以当我调整常规 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 回答
斯蒂芬大帝
TA贡献1827条经验 获得超8个赞
我放弃了这个小项目，然后随机意识到我在做一些完全不同的事情时做错了什么 - 如果有人犯和我一样的错误，我会设法忘记设置视口。添加这个使得 CSS 工作：
<meta name=viewport content="width=device-width, initial-scale=1">
拉风的咖菲猫
TA贡献1995条经验 获得超2个赞
当您使用 @media 查询时，当括号内的“规则”被接受时，它会在其中执行任何操作。
所以，如果你说 max-width:1000px 那么，如果你的浏览器是 600px 那么其中的任何内容都将适用，如果不是，那么它将被忽略。
对于小于 600px 的屏幕，您正常的 @media css 规则将被接受，并且您所说的宽度：40%，并且您无法以％为单位进行测量。
@media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
- 2 回答
- 0 关注
- 118 浏览
添加回答
举报
0/150
提交
取消