У меня есть скрипка , которую я воспроизвел, увидев скриншот ниже.Снимок экрана должен быть точно таким же в режиме рабочего стола / мобильного телефона / планшета.
На данный момент моя скрипка выглядит очень хорошо в представлении рабочего стола.
Коды CSS, которые я использовал в скрипте для выравнивания изображений по прямой линии в представлении рабочего стола:
.images {
display: flex;
justify-content: space-between;
align-items:center;
background-color: #eee;
padding: 1rem;
flex-wrap: wrap;
}
.images img {
width: auto;
height: 2.5rem;
}
В мобильном телефонепросмотр изображений становится неорганизованным (, как показано на скриншоте ниже ).
Постановка задачи:
Мне интересно, какие CSS-коды мне следует использоватьдобавьте скрипку, чтобы изображения были выровнены по прямой линии как в режиме просмотра для мобильных устройств, так и для планшета .
Я почти уверен, мне нужно использовать медиа-запросы для выравнивания изображений по прямой линии, но я не уверен, какие CSS-коды мне нужно добавить туда.Я попытался использовать следующие CSS-коды в медиа-запросах, но это не сработало.
@media only screen and (max-width: 768px) {
.images {
width: 100%;
}
.images img {
width: auto;
height: 2.5rem;
}
}