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 тоже вещь хорошая.


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