Медиа-запросы / отзывчивая веб-страница

Question

Я пытаюсь создать адаптивную веб-страницу с моим сайтом здесь: https://chunzg.github.io/about.html

Я создал гибкий контейнер для фотографии и текста.

Использовал медиа-запрос, указанный ниже, чтобы сначала протестировать экран моего ноутбука:

@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 600px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
   .sidebar {
    width: 100%;
   }
   .photo {
    width: 100%;
   }
   .text {
    width: 100%;
   }
}

, но он не работает - ничего не меняется. Мне бы хотелось, чтобы боковая панель, фотография и текст располагались вертикально друг над другом, если я смотрю на узкий экран.

Я знаю, что, должно быть, делаю что-то не так, но просто не имею достаточного опыта, чтобы знать, что нужно изменить

Спасибо

Answer 1

Эй, я даю ссылку: https://www.w3schools.com/css/css3_mediaqueries_ex.asp Я не могу понять точный вопрос, но я думаю, что это должно быть так:

/* On screens that are 992px wide or less, go from four columns to two columns */
    @media screen and (max-width: 600px) {
   .sidebar {
    width: 100%;
   }
   .photo {
    width: 100%;
   }
   .text {
    width: 100%;
   }
}

В моем коде я скрипты позволяет веб-страницу изменить ширину на 100, если размер экрана меньше 600 или равен 600. (Возможно, это может быть полезно для экрана вашего ipad или небольшого устройства)

Кроме того, почему вы использовали min и max одновременно ?

Обратите внимание, что я не профессионал, но у меня был некоторый опыт работы с css, так что мой ответ, возможно, не мог быть решением. Но давайте попробуем это.