Медиа-запросы для Macbook Pro retina

Question

Возможно ли писать различные медиа-запросы для 13-дюймовой и 15-дюймовой Macbook Pro Retina. Ive пробуя все виды запросов, но ничего не похоже на правильное. Я совершенно новичок в разработке, поэтому, если бы кто-нибудь мог предоставить мне два медиа-запроса, которые будут работать независимо для каждого экрана, мы будем высоко оценены.

Answer 1

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

Вы можете использовать медиа-запросы, как:

(max-width: 640px) 
(min-width: 641px) and (max-width: 800px) 
(min-width: 801px) and (max-width: 1024px) 
(min-width: 1025px) 

Последняя будет применяться ко всем резолюциям выше 1025px, например.

Answer 2

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

/* ----------- Non-Retina Screens ----------- */ 
@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
} 

/* ----------- Retina Screens ----------- */ 
@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (min-resolution: 192dpi) { 
} 

See Chris Coyier's guide for more details