Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Коллективная работа » Мобильный стиль. Корректирование и доработка


Мобильный стиль. Корректирование и доработка

Сообщений 1 страница 9 из 9

1

Не пришло в голову куда написать, решил, что это все таки коллективная работа... Ребята, а это что за приколы в мобильном стиле:

@media screen and (max-width: 540px)
mobile.5.css:22
img {
    max-width: 100% !important;
    height: auto;
}

Нафига такие приоритеты на все картинки на всем форуме? Это с расчетом, что перебивать даже не пытайтесь? Итак импортантов хватает... Я не видел мобильный вариант, но... Посмотрел, хватило части (лучше бы не видел):

@media screen and (max-width: 540px) {
    html, body, #pun, .punbb {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    background-size: contain;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    overflow-wrap: break-word;
    float: none;
}
body {
    position: relative;
    background-position: center 0;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: scroll !important;
    z-index: 1;
}

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

Не удержался глянул дальше:

#pun {
    width: 100% !important;
    border-width: 0 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}


Этот файл сервиса: http://forum4.ru/style/mobile.5.css ? - Посмотрел, это файл сервиса... Это надо отключать, и так сложно что-то адаптировать, а с такими раскладами еще и просчитывать импортанты для мобильных стилей.. %-)

Отредактировано kolobdur74 (Вс, 19 Фев 2017 23:37:20)

+1

2

kolobdur74
Ну импортанты легко перебиваются более подробным указанием селектора(собсно ты где-то про это и писал в теме)
К примеру

html img{
  max-width:80%!important;
}

#pun_wrap #pun {
  /*...*/!important;
}

Без !important многие правки для мобилок просто не срабатывают, особенно с учетом того, что юзеры любят пихать кучу кодов -правок в HTML верх, ниже мобильного стиля, тады без !important их не перекрыть(если поменяем - наверняка будут жалобы от юзеров, что форум съехал и т.п)
С другой стороны кнешн согласен, что много импортантов - не Айс, но и без них тут вряд ли обойтись
Автор правок под мобильный стиль - Reysler, он не первый год с css знаком, мон сказать профессионал в этой области(а ты и мну дилетанты, так что мож не оч правильная точка зрения у нас)

Ксать есть тема про мобильный стиль Вопросы по мобильному стилю

0

3

Наверное надо было мне дописать тему по сборке собственного мобильного стиля (для этого я её и создавал). Может добить её на основе существующего от сервиса, но с рядом доработок, убрав лишние important's и меню на выбор пользователя: иконками или текстом.

+3

4

Alex_63, Reysler
Ну, вот я убрал в стандартном все импортанты и посмотрел как работает:
http://s8.uploads.ru/zOeNm.png
http://sh.uploads.ru/VQWbw.png
http://s2.uploads.ru/SPpxz.png
http://s1.uploads.ru/2cdhU.png
http://s4.uploads.ru/DrnPH.png

Ну, и картина мной ожидаемая - всё работает, кроме части правок под браузерные движки, вот на них, если есть необходимость импортанты можно оставить, а со всего остального надо убрать.. Ведь на самом деле уже задано приоритетное правило для данного разрешения: @media screen and (max-width: 540px) { - то есть уже задано, что при данном разрешении работает дизайн под этими скобками, а основной работает, если не противоречит заданным правилам для этого разрешения...

Вот мой файл:

Код:
<link rel="stylesheet" type="text/css" href="http://co.forum4.ru/files/000d/8d/19/35941.css" />

Можно потестить, особенно хорошо бы глянуть с реального устройства...

Alex_63 написал(а):

Ксать есть тема про мобильный стиль Вопросы по мобильному стилю

Не увидел эту тему :blush:

Reysler написал(а):

Наверное надо было мне дописать тему по сборке собственного мобильного стиля (для этого я её и создавал). Может добить её на основе существующего от сервиса, но с рядом доработок, убрав лишние important's и меню на выбор пользователя: иконками или текстом.

:cool:

Alex_63, Reysler просьба - поменяйте название темы к примеру на: Мобильный стиль. Разработка. Или что нибудь подобное..

Отредактировано kolobdur74 (Пн, 20 Фев 2017 13:50:58)

0

5

kolobdur74 написал(а):

Ну, и картина мной ожидаемая - всё работает,

Ну я написал:

Alex_63 написал(а):

юзеры любят пихать кучу кодов -правок в HTML верх, ниже мобильного стиля, тады без !important их не перекрыть

Но в принципе согласен, что нун по возможности минимализировать количество импортантов, я тож попробую - потещу(проверить мобильный стиль сейчас есть с чего, правда там мобильный Msie 10, но в целом понятно будет)

kolobdur74 написал(а):

Alex_63, Reysler просьба - поменяйте название темы к примеру на: Мобильный стиль. Разработка. Или что нибудь подобное..

Назвал Мобильный стиль. Корректирование и доработка  - так норм?

+1

6

Alex_63 написал(а):

юзеры любят пихать кучу кодов -правок в HTML верх, ниже мобильного стиля, тады без !important их не перекрыть

Дык, в теории если те правки не вставлены в @media screen and, то работают только для обычного стиля..

Alex_63 написал(а):

Назвал Мобильный стиль. Корректирование и доработка  - так норм?

Да, нормально :cool:

0

7

kolobdur74 написал(а):

Дык, в теории если те правки не вставлены в @media screen and, то работают только для обычного стиля..

Ну на мобильном-то они тож срабатывают, и скорее всего перекроют то, что прописано в mobile.5.css(если там не будет импортантов)... Хотя не уверен, это тестить нун

0

8

Alex_63 написал(а):

Ну на мобильном-то они тож срабатывают, и скорее всего перекроют то, что прописано в mobile.5.css(если там не будет импортантов)... Хотя не уверен, это тестить нун

С чего они должны перекрыть? Ты задал правило для данного разрешения - оно имеет выше приоритет без правила для данного разрешения, и пофиг где это прописано... А вот с импортантами система приоритетов уже начинает меняться, бо импортант уже можно перкрыть только импортантом у которого селекторов прописано больше и так до пока селекторы не закончились... Исключения - это хаки для браузера, ну на подобии, что мы с тобой недавно сталкивались - перебить цвет импунта - вот такие хаки, да должны быть с импортантами всегда, но в данном файле я их не заметил.. Остальные обычные правила работают, если не противоречат специальным правилам, прописанным под данные разрешения... Вот с таблицами сложнее - систему приоритетов в таблицах, по моему, точно не знают сами разработчики CSS правил... Но протестить на реальных аппаратах тем не менее стоит...

И да, если кто-то делает стиль для мобильного - они могут перекрыть, но это уже проблемы того кто делает отличный дизайн от оригинала... Ты же видишь, что в оригинале импортантов фактически нет и это для сервиса нормально, хотя тоже, по моему, Герда ругалась, что везде .punbb указывается, что тоже не очень универсально..

Отредактировано kolobdur74 (Вт, 21 Фев 2017 23:19:47)

0

9

kolobdur74 написал(а):

С чего они должны перекрыть? Ты задал правило для данного разрешения - оно имеет выше приоритет без правила для данного разрешения,

Хм, вот это не уверен, что так ( Нун проверить еще

0


Вы здесь » Единый форум поддержки » Коллективная работа » Мобильный стиль. Корректирование и доработка