Как я могу изменить этот CSS только для настольных браузеров?

Question

Я хотел бы изменить следующий кусок CSS:

ul.deals > li > a > img { 
border-radius: 5px; 
border-width: 0; 
min-height: 200px; 
width: 100%; 
} 

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

Как я могу сказать, что приведенный выше css применим только к мобильным устройствам - и разрешите мне написать немного css, специфичное для устройств большего размера?

Answer 1

Im уверен, что вам нужно Media Queries здесь

, например

@media only screen and (max-device-width: 480px) { 
    ul.deals > li > a > img { 
    border-radius: 5px; 
    border-width: 0; 
    min-height: 200px; 
    width: 100%; 
} 
}