Путь адаптивности?

Question

[Ученик]

Всем привет! Подскажите новичку... Правильно ли я делаю адаптивность или все можно переделывать ? И когда доделаю то такую работу в портфолио можно будет положить ? Да и сама верстка не до конца сделана, меня интересует именно адаптивность... Тут сайт thekawder.github.io
Спасибо !

Answer 1

[Котик Антон]

Что-то тут не так:

@media all and (min-width: 601px) and (max-width: 991px) and (max-width: 768px)

В таком простом макете никак не ожидал увидеть километры такого вот кода. Наверняка, что-то вы намудрили тут:

.header-top-contacts {
    width: calc(99.99% * 10/12 - (30px - 30px * 10/12)); }
  .header-top-contacts:nth-child(n) {
    float: left;
    margin-right: 30px;
    clear: none; }
  .header-top-contacts:last-child {
    margin-right: 0; }
  .header-top-contacts:nth-child(12n) {
    margin-right: 0; }
  .header-top-contacts:nth-child(12n + 1) {
    clear: left; }
  .header-top-socials {
    width: calc(99.99% * 2/12 - (30px - 30px * 2/12)); }

Ну а самая главная ошибка по адаптивности - не следование принципам Mobile first.

Comments

[Ученик]

Короче, сетка эта lost фуфло) А чувак из видео говорил что она awesome ) Буду использовать сетку из bootstrap ) Спасибо за совет!

[Котик Антон]

Веб ученик: Не возьмусь утверждать, что это прямо таки фуфло. Вроде бы звёзд на гитхабе у них достаточно, значит пипл хавает. Ничего кроме этого c хорошим обсуждением и критикой lost'a что-то найти не могу. Сам я с этой сеткой только начал знакомиться и вот, какие у меня мысли:

Они сделали ставку на "on the fly grid"... Ну допустим, выглядит действительно хорошо, когда в коде пишешь просто lost-column: 1/3; или даже lost-column: 5/78;
Да только вот CSS код, получаемый на выходе, его количество и поддержка браузерами (calc) оставляют желать лучшего. И всё ради чего? Чтобы не было фиксированного ограничения по числу колонок? А так ли оно надо? Могу ошибаться, но это уже никакая не сетка получается, если на сайте и 12-колоночные блоки уживаются, скажем, с 13-колоночными и 15-колоночными... Не проще ли тогда уж совсем отказаться от сетки как таковой?

[Ученик]

Спасибо! Попробую вообще без сетки тогда :) Ну или bootstrap возьму!

[semki096]

Я skeleton пользую, просто как двери, надёжно, минимум кода.

Answer 2

[Stalker_darkway]

1. Разрешение 992 - 1032 последний пункт меню уехал в контент.
2. Сalc(для адаптивности норм, для кроссбраузерности насколько я знаю не очень).
3. Где меню для разрешения под мобильники?
4. Минимальной ширины нет. Это не обязательно, но желательно.
Общая картина: мне нравится, если что-то исправлять(не учитывая calc), то проблем не возникнет.

Comments

[Ученик]

Я использую сетку lost ) Там на calc() все )

[Ученик]

Да да да ... А как поступить в этом случае ? Вниз или прятать в мобайл стиль ?

[Ученик]

Веб ученик: 1. Разрешение 992 - 1032 последний пункт меню уехал в контент.

[Stalker_darkway]

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