CSS Изменить изображения, которые будут сложены при увеличении

Question

У меня есть страница меню с двумя изображениями. По сути, я хочу, чтобы изображения отображались рядом в веб-браузере (по центру в строке), а когда в мобильном представлении я хочу, чтобы они появлялись друг над другом (по центру столбца). Как и в случае, когда изображения располагаются рядом в мобильном представлении, они слишком малы для щелчка.

Я использовал классы строк и столбцов таблицы стилей framework7 для размещения изображений рядом в веб-браузере.

<div class="row">
    <div class="col-50">
       <a href="page1.html"><img src="css/images/image1.png" height="50%" width="50%"></a>
    </div>
    <div class="col-50">
        <a href="page2.html"><img src="css/images/image2.png" height="50%" width="50%"></a>
    </div>
</div>

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

Answer 1

Вы можете создавать классы CSS, которые влияют отдельно для Интернета и мобильных устройств.Это позволит более гибко организовать мобильное представление.Один из способов сделать это - добавить имя класса 'mobile' в ваш framework7 index.html при инициализации приложения, проверяющего загрузку веб-сайта на мобильном телефоне.

Вы можете проверить, является ли загрузочное устройство мобильным устройством, проверив userAgent.».Подробнее Как обнаружить мобильное устройство с помощью JavaScript?

Тогда вы можете указать только классы для мобильных устройств в формате ниже.Пример:

.mobile .container {
   color: red;
}