Спецификация запросов к мультимедиа Проблема размера изображения при увеличении области просмотра с использованием метода additive css

Question

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

Я использую Sass для начала.

@media 320 я включить все мои стили для определенного блока содержания на странице которого у меня есть изображение в пределах этого блока, а вот CSS для этого медиа-запроса:

section.catalog-grid { 
    position: relative; 
    height: 100%; 
    overflow: hidden; 
    .cat-dvdr { 
     @include btm-brdr; 
     padding: 20px 0; 
    } 

    h4.catalog-title { 
     font-weight: normal; 
     font-size: 1.5em; 
     color: $blue; 
     top: 0; 
     padding: 0; 
     margin: 0; 
     text-align: center; 
    } 
    h6 { 
     font-weight: normal; 
     font-size: 1em; 
     color: $pale-grey; 
     padding: 0 10%; 
     margin: 0; 
     text-align: center; 
    } 
    img.cat-img { 
     @include center; 
    } 
    img.rocket { 
     width: 40%; 
     margin-top: 30px; 
    } 
    img.wizard { 
     width: 50%; 
     margin-top: 10%; 
     margin-bottom: 10%; 
    } 
    img.order { 
     width: 60%; 
     margin-top: 10%; 
     margin-bottom: 10%; 
    } 

@media мин -width 568px Я на самом деле хотел изображение быть меньше процентная шкала, и вот мой Sass, что я добавил к этому медиа-запроса:

img.rocket { 
    width: 30%; 
    margin-top: 30px; 
} 
img.wizard { 
    width: 40%; 
    margin-top: 10%; 
    margin-bottom: 10%; 
} 
img.order { 
    width: 50%; 
    margin-top: 10%; 
    margin-bottom: 10%; 
} 

мое мышление позади этого является то, что, так как я только добавлять стили, которые меняются в окно просмотра становится больше, мне не нужно добавлять все Sass fo r этот блок (как я сделал при 320px медиа-запросе), а просто добавлю правила, которые я хочу изменить.

Однако, что происходит, так это то, что размер процентного изображения изображения медиапроигрывателя 320px переопределяет процентный размер изображения мультимедийных запросов 568px, когда область просмотра находится на 568 пикселей, и я не уверен, почему.

Прилагается скриншот того, что происходит в DevTools, и я подозреваю, что причина, по которой стиль 320px переопределяет стиль 568px, объясняется большей спецификой, поскольку он отмечает все родительские элементы этого конкретного изображения.

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

Имеет ли это смысл?

Вот скриншот:

Answer 1

В 568px запросе, изображение предназначено как:

img.rocket { ... } 

В 320px запросе, это:

section.catalog-grid img.rocket { ... } 

Поскольку у вас есть дополнительная специфика в правиле 320px, способы переопределяют меньшее правило, независимо от того, где оно расположено в таблице стилей. Вам нужно либо соответствовать этой специфике в вашем правиле 568px, либо уменьшить спецификацию правила 320px.

В вашей дерзости, он выглядит, как у вас есть image.rocket, содержащиеся внутри блока section.catalog-grid:

section.catalog-grid { 
    ... 
    img.rocket { ... } 
} 

Это создает скомпилированный правило, которое вы видите.