Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.08.2023, 03:03   #1
Dripper
 
Регистрация: 16.03.2022
Сообщений: 8
По умолчанию Как сделать, чтобы на мобильной версии элементы менялись местами?

на скриншоте десктопная и мобильная версия вёрстки. Как сделать, чтобы у одного элемента на мобильной версии слева была иконка а справа текст, а у другой слева текст, а справа иконка? Ещё чтобы всё симметрично, везде размер элементов и отступы одинаковые.
Изображения
Тип файла: png Screenshot_93.png (43.2 Кб, 1 просмотров)
Dripper вне форума Ответить с цитированием
Старый 01.08.2023, 03:05   #2
Dripper
 
Регистрация: 16.03.2022
Сообщений: 8
По умолчанию

в общей обёртке если один блочный элемент сверху, у другой снизу, а я сменил обёртке стиль на "display: flex;", а обоим элементам "width: 50%;", то верхний станет слева, а нижний - справа. А как наоборот сделать, чтобы верхний справа, а нижний слева? я придумал только использовать position: absolute. получилось криво. Как сделать, чтобы блок-обёртка подстраивался по высоте под картинку?
https://codepen.io/zfO/pen/oNQJorE
Код:
<div class="cir_obj_container">
    <div class="cir_obj">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
    <div class="cir_obj reverse">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
    <div class="cir_obj">
        <div class="img"><img src="https://sun9-9.userapi.com/c4409/u154917110/d_6bb0dab9.jpg"></div>
        <div class="bottom_text">
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
        </div>
    </div>
</div>
<style>
.cir_obj_container{
    display: flex;
    width: 100%;
}
 
.cir_obj{
    width: 33%;
    display: inline-block;
    margin: 20px;
}
 
.cir_obj img{
    margin: 20px;
    height: 230px;
    width: auto;
}
 
.cir_obj img{
    width: 100%;
    height: auto;
}
 
@media (max-width: 1280px) {                
    .cir_obj{
        width: 100%;
        display: flex;
        margin: 0px;    
    }
    .cir_obj_container{
        display: block;
    }
    .cir_obj .bottom_text, .cir_obj .img{
        width: 50%;
        margin: 30px;
        
    }
    .cir_obj.reverse .bottom_text{
        width: calc(50% - 60px);
    }
    .cir_obj.reverse .img, .cir_obj.reverse .img img{
        right: 0px;
        position: absolute;
    }
}
<style>
Изображения
Тип файла: jpg Screenshot_95.jpg (64.3 Кб, 0 просмотров)
Тип файла: jpg Screenshot_96.jpg (57.3 Кб, 0 просмотров)
Dripper вне форума Ответить с цитированием
Старый 23.09.2023, 16:25   #3
James229
Заблокирован
 
Регистрация: 21.09.2023
Сообщений: 7
По умолчанию

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

Используйте медиа-запросы. Медиа-запросы CSS позволяют применять стили в зависимости от размера экрана или типа устройства. Вы можете использовать медиа-запросы для настройки определенной ширины экрана, например, той, которая обычно встречается на мобильных устройствах (например, 320 пикселей, 480 пикселей и т. д.).

Настройте CSS Flexbox или Grid. Если ваш макет основан на CSS Flexbox или Grid, вы можете использовать медиа-запросы для изменения свойств гибкости или сетки. Например, вы можете изменить flex-directionсвойство на «столбец» для мобильных макетов, чтобы элементы располагались вертикально.

CSS

Скопировать код
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}
Изменение порядка элементов. Чтобы поменять местами элементы, вы можете использовать это orderсвойство. Присвойте элементам разные orderзначения, чтобы изменить их порядок, когда размер экрана соответствует медиазапросу.

CSS

Скопировать код
@media screen and (max-width: 768px) {
.element-to-swap {
order: 2; /* Change the order as needed */
}
}
Скрыть или показать элементы. В некоторых случаях вам может потребоваться скрыть или показать определенные элементы на экранах разных размеров. Для этой цели вы можете использовать displayсвойства и медиа-запросы.

CSS

Скопировать код
@media screen and (max-width: 768px) {
.element-to-hide {
display: none; /* Hide the element on smaller screens */
}
}
Тестируйте и улучшайте: протестируйте свой адаптивный дизайн на различных мобильных устройствах и размерах экрана, чтобы убедиться, что элементы меняются ожидаемым образом и макет выглядит хорошо.

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

Последний раз редактировалось BDA; 02.10.2023 в 16:14. Причина: реклама удалена
James229 вне форума Ответить с цитированием
Старый 24.09.2023, 17:05   #4
James229
Заблокирован
 
Регистрация: 21.09.2023
Сообщений: 7
По умолчанию

Либо же
Определите элементы . Сначала определите элементы, которые вы хотите поменять на мобильных устройствах. Назовем их Элемент А и Элемент Б.

Структура HTML . Убедитесь, что ваша структура HTML настроена таким образом, чтобы ее можно было легко менять. Убедитесь, что элемент A и элемент B расположены близко друг к другу в разметке HTML.

CSS Flexbox или Grid : вы можете использовать CSS Flexbox или Grid для управления расположением этих элементов. Flexbox особенно полезен для изменения порядка элементов.

CSS

Скопировать код
.container {
display: flex;
flex-direction: column; /* For mobile layout, stack elements vertically */
}

@media (min-width: 768px) {
.container {
flex-direction: row; /* For larger screens, display elements side by side */
}

.element-a {
order: 2; /* Change the order for Element A */
}

.element-b {
order: 1; /* Change the order for Element B */
}
}
Медиа-запросы . Используйте медиа-запросы для применения различных стилей CSS в зависимости от размера экрана. В приведенном выше примере мы используем @media (min-width: 768px)определение стилей для экранов с минимальной шириной 768 пикселей (типично для планшетов и более крупных устройств). При необходимости вы можете настроить эту точку останова.

Тестирование . Проверьте свой дизайн на различных мобильных устройствах и экранах различных размеров, чтобы убедиться, что элементы меняются должным образом.

Адаптивный дизайн . Этот подход является частью адаптивного веб-дизайна, целью которого является обеспечение оптимального просмотра и взаимодействия на разных устройствах. Рассмотрите также другие методы адаптивного дизайна, такие как настройка размеров шрифта, интервалов и изображений для мобильных экранов.

Используя CSS Flexbox или Grid и медиа-запросы, вы можете легко управлять расположением элементов и добиваться желаемого эффекта замены на мобильных устройствах, сохраняя при этом удобный дизайн.

Последний раз редактировалось BDA; 02.10.2023 в 16:14. Причина: реклама удалена
James229 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS код не работает в мобильной версии JPinkman JavaScript, Ajax 3 13.01.2021 12:05
Не отображается картинка в мобильной версии Гай_Квинт Фриланс 1 19.04.2019 00:33
сделать, чтобы коэффициенты в csv файле менялись также как на сайте в режиме онлайн Виктор2005 Python 5 14.10.2018 02:01
как сделать чтобы в моих Timages менялись картинки alex 2000 Помощь студентам 2 07.02.2012 17:03
Помогите. Как сделать так чтобы листы в книге менялись автоматически. akuninb Microsoft Office Excel 8 24.06.2009 15:56