按钮宽度 CSS 在移动设备上不会改变，但在桌面上很好

Question

I'm trying to get a button to have a responsive width based on the screen size.我试图让一个按钮根据屏幕尺寸具有响应宽度。 I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller.我得到了它，因此当我调整常规 Chrome window 的大小时它可以完美运行，但是当我切换显示以模仿设备（任何移动设备/ipad/等）时，按钮的宽度立即变得更小。 It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools.即使我在 iPhone 上打开它，它看起来也一样，所以这不仅仅是 Chrome 工具的一些奇怪问题。 When I inspect the element, I can see that width has been disabled:当我检查元素时，我可以看到宽度已被禁用：

I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules.我认为可能有一些 CSS 覆盖它，但这并不能解释为什么当我只是调整 Chrome 的大小甚至选择分辨率比我的任何规则更宽的设备之一时，这种行为会完全消失。 I have still tried removing all of my @media rules and the behavior persists.我仍然尝试删除我的所有@media 规则并且行为仍然存在。

The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):该按钮是非常基本的 HTML，它甚至没有包含在可能导致问题的 div 中（除非它下面有一个弹性框可能是一个问题？）：

<body>
    <button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>

And all of the relevant CSS is here:所有相关的 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;
    }
}

I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.我也尝试添加!important ，然后它确实适用于移动设备 - 但随后停止更改任何其他分辨率并且一直停留在 40%。

Answer 1

When you use a @media query, it does anything inside it when the 'rules' inside the brackets are accepted.当您使用@media 查询时，当括号内的“规则”被接受时，它会在其中执行任何操作。

So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.所以，如果你说 max-width:1000px 那么，如果你的浏览器是 600px 那么它里面的任何东西都将适用，如果不是，那么它将被忽略。

For screens smaller than 600px, your normal @media css rule will be accepted and there you said width:40%, and you can't measure in %.对于小于 600 像素的屏幕，您的正常 @media css 规则将被接受，并且您说宽度：40%，并且您不能以 % 为单位进行测量。

@media only screen and (max-width: 600px) {
    #ranking-button {
        width: 200px;
    }
}

Answer 2

I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport.我放弃了这个小项目，然后在做一些完全不同的事情时随机意识到我做错了什么——万一有人和我犯同样的错误，我会设法忘记设置视口。 Adding this made the CSS work:添加这个使 CSS 工作：

<meta name=viewport content="width=device-width, initial-scale=1">

按钮宽度 CSS 在移动设备上不会改变，但在桌面上很好

问题描述

2 个解决方案

解决方案1
0 2020-04-12 18:27:46

解决方案2
0 已采纳 2020-08-20 13:34:57

按钮宽度 CSS 在移动设备上不会改变，但在桌面上很好

问题描述

2 个解决方案

解决方案1 0 2020-04-12 18:27:46

解决方案2 0 已采纳 2020-08-20 13:34:57

解决方案1
0 2020-04-12 18:27:46

解决方案2
0 已采纳 2020-08-20 13:34:57