Мои медиа-запросы работают на моем iphone, но не при изменении размера браузера

#html #css #responsive-design #media-queries

#HTML #css #адаптивный дизайн #медиа-запросы

Вопрос:

Когда я просматриваю свой сайт на своем iphone, все выглядит так, как я планировал, но, однако, когда я изменяю размер своего браузера, чтобы быстрее проверять изменения css, я не вижу, чтобы медиа-запрос оказывал на него какое-либо влияние.

Моя адаптивная часть дизайна моего CSS начинается как:

 @media screen and (min-device-width : 320px) and (max-device-width : 480px) {

/*style*/

}

Затем у меня есть следующий тег в моей голове вместе со связыванием таблицы стилей

 <meta name="viewport" content="width=device-width, user-scalable=no">

Кто-нибудь может мне здесь помочь? Спасибо — www.joewinfield.net/portfolio

1. Насколько мне известно, min-device-width и max учитывают только размер экрана устройства. Не в окне браузера. Попробуйте добавить max-width: 320px, чтобы учесть размеры окна браузера

Ответ №1:

Используйте min-width в медиа-запросе вместо min-device-width . То же самое касается max-device-width , конечно.

min-device-width Относится к разрешению дисплея (например. 1024 из 1024×768), в то время min-width как относится к ширине самого браузера.

Обычно это лучший подход для использования min-width вместо min-device-width .