Почему медиа -запросы в проекте VITE не влияют на ViewPort ⇐ Html

[Anonymous]

Я использую первое подход на рабочем столе для веб -разработки с использованием VITE, и сейчас я пытаюсь стилизовать для мобильных устройств. Я установил пару медиа-запросов, один с шириной максимума 430px и один с максимальной шириной 900px. Когда я строю и подталкиваю к производству сайта на мобильном телефоне игнорирует запрос 430px и переходит к запросу 900px. Я ожидал, что это исправят вещи, но это не применило мои стили. Поэтому я изменил свою максимальную ширину = 430px на максимальную ширину = 860px, и это применяет стиль. Я также попытался использовать медиа-запрос устройства-пикселя-Ratio 2 и который применил стиль. Но тег Viewport включен в котелную пластину для VITE, поэтому я не уверен, что происходит. < /P>
Минимальный воспроизводимый пример: < /p>

• npm Создайте Vite@last> React> vanilla < /li>
  Затем добавьте ниже index.css < /li> < /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /li>
  .@media only screen and (max-width: 430px) {
  :root {
  color: #213547;
  background-color: #ffffff;
  }
  a:hover {
  color: #747bff;
  }
  button {
  background-color: #f9f9f9;
  }
  }
  < /code>
  
  Запустите NPM Run Build для создания Dist Polder < /li>
  Развертывание приложения на хостинге Firebase (что вы хотите использовать в качестве своего общедоступного каталога? Dist, настройка как одностраничное приложение? Да) < /li>
  . Вместо этого будет черный
• Запрос от 430px до 900 Повторите предыдущие 3 шага и развертывание, и он покажет белый

Подробнее здесь: https://stackoverflow.com/questions/796 ... y-viewport