Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 09.03.2020
Сообщений: 1

Смена класса css изображения в зависимости от разрешения экрана

09.03.2020, 05:07. Показов 994. Ответов 2
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Всем привет! Не получается решить следующую проблему:
Есть изображение в записи на Wordpress. Нужно чтобы при просмотре с компьютера к нему применялся класс alignwide, а при просмотре с мобильного другой (собственный) класс.
Проблема в том, что я не знаю что именно в классе вордпресса alignwide, и не могу скопировать его свойства (пробовал подобрать, но не получается), чтобы через @media прописать правило.
Буду очень благодарен за помощь!
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 09.03.2020, 05:07
Ответы с готовыми решениями:

изменение css в зависимости от разрешения экрана
Есть CSS, где планируется изменить ширину DIV (class=.ipbox, id=container) в зависимости от разрешения экрана. Устанавливаю в JS: ...

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

Смена разрешения экрана
Понимаю, что банальнейший вопрос: как сменить разрешение экрана? Мне нужно, чтобы при запуске оно менялось на 640x480, а при завершении...

2
Заблокирован
09.03.2020, 14:09
если надо смотреть свойства класса - то горячие клавиши Shift+CTR+C открывает инструменты разработчика, там можно посмотреть все свойства классов и все зависимости, какое свойство откуда тянется. А изменение класса следует производить с помощью js. но у этого метода есть ряд недостатков. Например попадалась на глаза мне такая вот реализация -
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

     if (!plp.screenSizes) {
                plp.screenSizes = {
                    sm: 768,
                    md: 992,
                    lg: 1200,
                };
            }
            if (plp.screens === 'screens-xs') plp.screen = 'xs';
            else if (plp.screens === 'screens-sm') plp.screen = 'sm';
            else if (plp.screens === 'screens-md') plp.screen = 'md';
            else if (plp.screens === 'screens-lg') plp.screen = 'lg';
            else if (plp.screens === 'screens-xs-sm') {
                if (document.body.clientWidth >= 768) plp.screen = 'sm';
                else if (document.body.clientWidth <= 767) plp.screen = 'xs';
            } else if (plp.screens === 'screens-xs-md') {
                if (document.body.clientWidth >= 992) plp.screen = 'md';
                else if (document.body.clientWidth <= 991) plp.screen = 'xs';
            } else if (plp.screens === 'screens-xs-lg') {
                if (document.body.clientWidth >= 1200) plp.screen = 'lg';
                else if (document.body.clientWidth <= 1199) plp.screen = 'xs';
            } else if (plp.screens === 'screens-sm-md') {
                if (document.body.clientWidth >= 992) plp.screen = 'md';
                else if (document.body.clientWidth <= 991) plp.screen = 'sm';
            } else if (plp.screens === 'screens-sm-lg') {
                if (document.body.clientWidth >= 1200) plp.screen = 'lg';
                else if (document.body.clientWidth <= 1199) plp.screen = 'sm';
            } else if (plp.screens === 'screens-md-lg') {
                if (document.body.clientWidth >= 1200) plp.screen = 'lg';
                else if (document.body.clientWidth <= 1199) plp.screen = 'md';
            } else if (plp.screens === 'screens-xs-sm-md') {
                if (document.body.clientWidth >= 992) plp.screen = 'md';
                else if (document.body.clientWidth >= 768 && document.body.clientWidth <= 991) plp.screen = 'sm';
                else if (document.body.clientWidth <= 767) plp.screen = 'xs';
            } else if (plp.screens === 'screens-xs-sm-lg') {
                if (document.body.clientWidth >= 1200) plp.screen = 'lg';
                else if (document.body.clientWidth >= 768 && document.body.clientWidth <= 1199) plp.screen = 'sm';
                else if (document.body.clientWidth <= 767) plp.screen = 'xs';
            } else if (plp.screens === 'screens-xs-md-lg') {
                if (document.body.clientWidth >= 1200) plp.screen = 'lg';
                else if (document.body.clientWidth >= 992 && document.body.clientWidth <= 1199) plp.screen = 'md';
                else if (document.body.clientWidth <= 991) plp.screen = 'xs';
            } else if (plp.screens === 'screens-sm-md-lg') {
                if (document.body.clientWidth >= 1200) plp.screen = 'lg';
                else if (document.body.clientWidth >= 992 && document.body.clientWidth <= 1199) plp.screen = 'md';
                else if (document.body.clientWidth <= 991) plp.screen = 'sm';
            } else if (plp.screens === 'screens-xs-sm-md-lg') {
                if (document.body.clientWidth >= 1200) plp.screen = 'lg';
                else if (document.body.clientWidth >= 992 && document.body.clientWidth <= 1199) plp.screen = 'md';
                else if (document.body.clientWidth >= 768 && document.body.clientWidth <= 991) plp.screen = 'sm';
                else if (document.body.clientWidth <= 767) plp.screen = 'xs';
            }
            [].slice.call(document.body.childNodes).forEach(function(el) {
                if (el.className && el.className.indexOf('area') >= 0) {
                    el.classList.add('screen-' + plp.screen);
                }
            });
0
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
09.03.2020, 14:37
Цитата Сообщение от Yurius38 Посмотреть сообщение
Проблема в том, что я не знаю что именно в классе вордпресса alignwide, и не могу скопировать его свойства (пробовал подобрать, но не получается)
а почему не знаете? вы не можете найти его в 150ти вложенных в друг друга дива или что?)) Или я не в теме
Если вдруг в теме, то откройте консоль на вкладке elements и нажмите ctrl+f и введите снизу в строку alignwide . Так вы его найдете

Цитата Сообщение от Yurius38 Посмотреть сообщение
а при просмотре с мобильного другой (собственный) класс.
Если вам нужен собственный класс просто для того, что бы изменить значения предыдущего, то зачем новый то создавать, поменяйте исходный.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 09.03.2020, 14:37
Помогаю со студенческими работами здесь

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

Динамическая смена разрешения экрана
Доброго всем дня. Есть несколько переменных (i,j,h). Их значения должны быть разными, в зависимости от текушего разрешения экрана....

Смена разрешения экрана в Виндос
Привет всем. Решил вот приложение набросать, но при изменениях размера или раб.стола - все сбивается. Пользуюсь менеджерами. Пытался...

Быстрая смена разрешения экрана
Здравствуйте !! У меня есть компьютер , и им параллельно со мной пользуются родители ,мне удобно пользоваться разрешением экрана 1280х1024...

Смена разрешения экрана на 320*240
Всем привет! Задался тут интересным вопросом. Многие старые игры были сделаны для разрешения 320*240, а запускаться через эмулятор в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Киев стоит - украинская песня
zorxor 28.01.2026
wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru