СМИ запросы на выбор разных 960 GS

Question

Я использую следующий код ниже, чтобы выбрать различные файлы CSS в зависимости от размера окна моего браузера. Однако первый, похоже, не работает, когда я изменяю размер окна до такого размера, даже если я обновляю страницу. Я не уверен, что я должен сделать, чтобы исправить это. Спасибо.

@import url("css/960.css") screen and (max-device-width: 1200px);
@import url("css/2520.css") screen and (max-device-width: 2560px);

Answer 1

Угадать здесь, но я не думаю, что это сработает, потому что вы используете max-device-width и не max-width.

device-width Является ли виртуальные пиксели, способные отображать.

Ширина устройства (Mozilla) - Описывает ширину устройства вывода (что означает весь экран или страница,
а не просто область рендеринга, такая как окно документа).

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

max-width С другой стороны, это измерение фактического видового порта, отображаемого в браузере.

Ширина (мозилла) - Функция среды ширины описывает ширину поверхности рендеринга устройства вывода (например, ширина окна документа или ширина поля страницы на принтере).

Таким образом, ваши варианты либо попробуйте использовать максимальную ширину:

@import url("css/960.css") screen and (max-width: 1200px);
@import url("css/2520.css") screen and (max-width: 2560px);

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