Я пытаюсь получить кнопку, чтобы иметь адаптивную ширину в зависимости от размера экрана. У меня так получилось, что он отлично работает, когда я изменяю размер обычного окна Chrome, но когда я переключаю дисплей на mimi c устройство (любое мобильное устройство / ipad / et c.) Ширину кнопки сразу становится намного меньше. Он выглядит одинаково, даже когда я открываю его на своем iPhone, так что это не просто странная проблема с инструментами Chrome. Когда я проверяю элемент, я вижу, что ширина была отключена:
Я думал, что некоторые CSS могут переопределить его, но затем это не объясняет, почему это поведение полностью исчезает, когда я просто изменяю размер Chrome или даже выбираю одно из устройств с более широкими разрешениями, чем любое из моих правил. Я все еще пытался удалить все свои правила @media, и поведение сохраняется.
Кнопка довольно проста c 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%.