адаптивный просмотр дизайна с помощью инструмента dev

Question

я пытаюсь сделать мой архив в html отзывчивым, но я не вижу (когда я использую инструменты разработчика, часть переключающего устройства) разницу между тем, что я кодирую для стола и что я кодирую для экрана мобильного устройства , я кодирую <meta name="viewport" content="width=device-width, initial-scale=1.0"> в html и это в css файле

@media  (max-width: 600px) {
    .Spotify {height: 500px;
    }
    .html{
      background-color: indianred;
    }
    .compra{
      width: 150px;
    }
  }

я не знаю, что я делаю неправильно

Answer 1

Для адаптивного дизайна вам необходимо переключиться из режима браузера в режим разработчика. Если вы нажмете правую кнопку мыши в браузере, вы увидите «Inspect».
(Chrome: «Осмотреть», Firefox: «Осмотреть элемент»)
Лично мне нравится chrome. :)
Это режим разработчика.
И, пожалуйста, посмотрите эту Панель инструментов устройства переключения (скриншот) .

Вы можете проверить свой мобильный стиль на нескольких устройствах (iPad Pro, iPad, iPhone ...)
Если вы хотите проверить свой стиль, вы можете выбрать « Отзывчивый (скриншот) ».