我正在尝试让按钮具有基于屏幕尺寸的响应宽度。我已经得到了它,所以当我调整常规 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 关注
- 114 浏览
添加回答
举报
0/150
提交
取消