Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сужение отступов размеров шрифта в меню ! (https://javascript.ru/forum/dom-window/55867-suzhenie-otstupov-razmerov-shrifta-v-menyu.html)

virtas 18.05.2015 12:27

Сужение отступов размеров шрифта в меню !
 
Доброго всем !
У меня есть обычное меню стандартное шириной 730px
и ul li a = padding: 30px 33px 30px 31px; font-size: 13px;
Как можно при помощи jQuery при сужении экрана сужать padding отступы с лева и права ну и font-size: 13px; до 10px аж пока не сузится до 500px и в конечном результате отступы должны быть не по 30px а мак по 8 !&

Sigizmund2012 18.05.2015 13:34

Цитата:

Сообщение от virtas (Сообщение 371347)
Доброго всем !
У меня есть обычное меню стандартное шириной 730px
и ul li a = padding: 30px 33px 30px 31px; font-size: 13px;
Как можно при помощи jQuery при сужении экрана сужать padding отступы с лева и права ну и font-size: 13px; до 10px аж пока не сузится до 500px и в конечном результате отступы должны быть не по 30px а мак по 8 !&

Можно отлавливать событие window.onresize и в обработчике менять стили соответствующим образом.
Если же не надо динамически реагировать, то получить ширину окна можно методом width() и соответствующим образом изменить стили.

kostyanet 18.05.2015 14:36

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

Без колонок скриптами жо достаточно задавать и контролировать ширину контейнера каждого корневого пункта (или просто пункта если меню простое), браузер по css остальное сам все сделает.

Короче, шарить по паддингам в каше - неправильно, надо изменить структуру, стили и все сразу станет проще.

kostyanet 18.05.2015 14:41

Да, с размером шрифта. Теоретически есть такие единицы измерения как vw - полный список тут - http://caniuse.com/#feat=viewport-units - но ишак до сих пор конкретно тупит с ними. Я как-то неделю не мог понять почему меня просят переделать красивую рекламную листовку залезающую в любую мобилу - оказывается смотрели ишаком, а я когда через его глаза глянул - охренел. Пришлось все выкосить и сделать на пикселах.

laimas 18.05.2015 14:59

Цитата:

Сообщение от virtas
Как можно при помощи jQuery при сужении экрана сужать padding отступы с лева и права ну и font-size: 13px; до 10px ...

Параметры нужно указывать в относительных единицах, тогда и мороки меньше будет.

kostyanet 18.05.2015 15:17

Да у него паддинг 30 - для распределения по ширине. Его вообще надо выкинуть, поставить text-aling:center а ширину блока уже контролировать скриптом, если по-другому не хочется. Тогда "паддинг" будет автоматическим.

В процентах можно поставить, но тогда количество пунктов должно быть известно заранее. Обычно так и бывает.

Sigizmund2012 18.05.2015 15:44

Цитата:

Сообщение от kostyanet (Сообщение 371367)
Стандартное меню загоняется в колонки и без гемора с жикверей само будет настраиваться под ширину экрана, а потом, когда все ресурсы исчерпает - сложится и не сильно страшно. Я так и делаю.

Без колонок скриптами жо достаточно задавать и контролировать ширину контейнера каждого корневого пункта (или просто пункта если меню простое), браузер по css остальное сам все сделает.

Короче, шарить по паддингам в каше - неправильно, надо изменить структуру, стили и все сразу станет проще.

Под колонками имеется ввиду какая-нибудь сетка типа Bootstrap или Grid960? Это хорошая штука, только под неё придётся всю структуру шаблона перевёрстывать.

kostyanet 18.05.2015 16:03

Щито? Имеется ввиду columns и ничего не надо переверстывать.

Да и вообще это элементарная вещь, хоть на сервере посчитать количество пунктов, поделить, округлить, хоть на клиенте, а потом el.style.width=w+'px'; и идеальная дистрибуция обеспечена.

На клиенте скрипт должен идти сразу после хтмля менюхи и все.

virtas 18.05.2015 18:58

Я уже немного и сам запутался сейчас просто медиа запросами пытаюсь сделать
http://evropa-osvita.kiev.ua

Sigizmund2012 18.05.2015 19:19

Цитата:

Сообщение от kostyanet
Щито? Имеется ввиду columns и ничего не надо переверстывать.

Это вот эти? http://caniuse.com/#search=multiple%20column Куча вендорных префиксов и IE 9 их не понимает. CSS фреймворки в таких случаях очень спасают, не знаю, что бы я без bootstrap делал. Media-queries тоже вещь хорошая.

kostyanet 18.05.2015 21:13

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

Кстати, знаете что будет если зайти 8-кой на сайт MDN? Сервер нот респозне.

kostyanet 18.05.2015 21:26

Цитата:

Сообщение от virtas
Я уже немного и сам запутался

У вас там каша несусветная. Это надо постараться такое наворотить на обычное однорядное меню.

Принцип построения

ul li a

li - по дефолту блочный, в одну строку одинаково что флоат лефт, что инлайн-блок. Далее в нем тег а - инлайновый, значит если других тегов а там не будет, все можно с родителя навесить - фонты, размеры, выключку (выравнивание по центру), выравнивание по вертикали или паддингом, или забиваете line-height на всю высоту (тогда нужен оверфлоу хидден, иначе шрифтовая машина задолбает) ну и свои стили - высоту, цвет, и тп. Получается сразу все хорошо кроме отсутствия боковых промежутков. И вот с ними-то вы и обходитесь через скрипты. Или на сервере сразу считаете сколько надо процентов выдать каждой кнопке чтоб они все были красивые, или на клиенте сразу после загрузки хтмля меню (но все равно могут быть подергушки).

То есть в таком меню по определению не может быть ничего сложного, его вообще на спанах можно сделать на одних в ряд с этими бефоре и афтер.

kostyanet 18.05.2015 21:36

Насчет медиа кверей. Это тоже слишком много жира для инвалидов с мобилами городить под каждую ленивую задницу запросы. Самое оптимальное решение сделать сайт который более-менее вменяемо складывается. Где-то поджимается, а потом уже складывается так, что интерфейс остается в нормах юзабилите, ну а в эстетике мобильный народ все равно нихера не понимает (иначе бы не браузил с мобил) так чта небольшая разверстка им не помешает насладиться. Можно сделать сайт который весь до 200 пикс в ширину сложится и все будет нормально выглядеть и будет работать на любой странице - без единого медиа кверя.

Это вообще нонсенс долбоящерам с телефонами делать сайты. Если у чела нет денег на нормальный комп и нет денег на место где его поставить, на стол и стул и все такое - такой чел вам не нужен и все. Ну то есть все равно что для бомжей делать дизайн.

Sigizmund2012 19.05.2015 08:06

Цитата:

Сообщение от kostyanet
Это вообще нонсенс долбоящерам с телефонами делать сайты. Если у чела нет денег на нормальный комп и нет денег на место где его поставить, на стол и стул и все такое - такой чел вам не нужен и все. Ну то есть все равно что для бомжей делать дизайн.

Мобильный трафик растёт и подстраиваться под этих "бомжей" всё равно придётся. Тут вопрос не денег, а мобильности: можно лазить в Интернет по дороге на работу/учёбу, сидя в кафе и т.д.

kostyanet 19.05.2015 17:02

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

УПД Примеры типа а вот у микрософта есть мобильная версия - не в кассу. Микрософты сами делают мобилки и софт для них. Они-то на нищете заработают, не так как Джобс мог, но все будет навар. А вы-то как? Только если аппы продавать, да и там говорят - тухло вообще.

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


Часовой пояс GMT +3, время: 18:25.