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

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

09.03.2020, 05:07. Показов 849. Ответов 2
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Всем привет! Не получается решить следующую проблему:
Есть изображение в записи на Wordpress. Нужно чтобы при просмотре с компьютера к нему применялся класс alignwide, а при просмотре с мобильного другой (собственный) класс.
Проблема в том, что я не знаю что именно в классе вордпресса alignwide, и не могу скопировать его свойства (пробовал подобрать, но не получается), чтобы через @media прописать правило.
Буду очень благодарен за помощь!
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 09.03.2020, 05:07
Ответы с готовыми решениями:

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

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

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

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

2
Заблокирован
09.03.2020, 14:09 2
если надо смотреть свойства класса - то горячие клавиши 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 3
Цитата Сообщение от Yurius38 Посмотреть сообщение
Проблема в том, что я не знаю что именно в классе вордпресса alignwide, и не могу скопировать его свойства (пробовал подобрать, но не получается)
а почему не знаете? вы не можете найти его в 150ти вложенных в друг друга дива или что?)) Или я не в теме
Если вдруг в теме, то откройте консоль на вкладке elements и нажмите ctrl+f и введите снизу в строку alignwide . Так вы его найдете

Цитата Сообщение от Yurius38 Посмотреть сообщение
а при просмотре с мобильного другой (собственный) класс.
Если вам нужен собственный класс просто для того, что бы изменить значения предыдущего, то зачем новый то создавать, поменяйте исходный.
0
09.03.2020, 14:37
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 09.03.2020, 14:37
Помогаю со студенческими работами здесь

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru