Адаптивная верстка

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем RAV, 29 авг 2015.

  1. RAV

    RAV

    Регистрация:
    29 авг 2015
    Сообщения:
    3
    Симпатии:
    0
    Есть сайт http://remodelov.ru .
    В целом он адаптивный, но проблема с хэдером.
    Как сделать шапку адаптивной кроссплатформенной?
    Заранее спасибо за ответ.
     
    Последнее редактирование: 29 авг 2015
  2. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    293
    Симпатии:
    186
    а чего вам в ней не нравится) она адаптивна за исключением красоты если только)
    для .topMenuStyleLine после 765px я бы назначил display:block;
    Код:
    @media only screen and (min-width:765px){
    .topMenuStyleLine {
    display: inline-block;
    }
    }
    
    ну и по такому же принципу уменьшил шрифт телефону, ну может ещё и центровки сделал да и кнопочку уменьшил

    P.s: но опять же смотря кросбраузерность до какого колена вам нужна, если и на совсем старых браузер чтобы работало, то тут скорей всего через js придётся
     
    Последнее редактирование: 29 авг 2015
  3. RAV

    RAV

    Регистрация:
    29 авг 2015
    Сообщения:
    3
    Симпатии:
    0
    AnOcToJI, адаптивной стала после того как сообщение набил уже) Поменял таблицу на слои. Но действительно, красота хромает, особенно блок с телефоном и кнопкой ужасно выглядит на низких разрешениях - телефон дробиться посреди номера. Не совсем понял по какому принципу можно уменьшить кнопку и шрифт телефона, чтобы он уменьшался пропорционально разрешению.
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Ставим себе web developer в firefox, для начала.

    Идем выставляем расширение по ширине 349px (с учетом минуса сколла браузера) и через стиль
    @media only screen and (max-width:320px){

    Делаем настройку отображения элементов для всех экранов в 320px

    Затем переключаемся в Chrome проделываем тот же фокус

    И смотрим в IE и Edge


    После фикса багов на 320 двигаемся к следующему экрану 480

    Затем 600/800 и 800/600
    И потом 1024 / 768

    Далее уже стандартное разрешение компа 1280, 1366, 1440, 1680, 1920 здесь иногда нужно феншуить, но в большинстве случае сайты по ширине не больше 1170px отображаются на данных разрешениях ок.

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

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

    То нужно тебе все px для шрифтов заменить на em а ширину для блоков на %.
     
    sir-knife и RAV нравится это.
  5. RAV

    RAV

    Регистрация:
    29 авг 2015
    Сообщения:
    3
    Симпатии:
    0
    Спасибо за ответ. Но у меня уже прописана адаптивность через точные прописанные размеры в px под разрешения. Все переделывать не хотелось бы.
     
  6. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    293
    Симпатии:
    186
    тогда просто подгоняй чтобы на разных устройсвах смотрелось хорошо
     
  7. Arthur Kazan

    Arthur Kazan

    Регистрация:
    28 сен 2015
    Сообщения:
    10
    Симпатии:
    0
    1. Почему логотип не стали уменьшать на меньших разрешениях?
    2. Некоторые блоки комично смотрятся на мобилке и планшете. Например, как мы работаем. Там где стрелки переносятся.
    3. Размеры кнопок к единому стилю привести бы. А то где-то они огромные, где-то еле пальцем клацаешь.
     
  8. stsa20014

    stsa20014

    Регистрация:
    12 окт 2015
    Сообщения:
    4
    Симпатии:
    0
    подскажите есть ли курсы пом адаптации если можно ссылку
     
  9. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
  10. stsa20014

    stsa20014

    Регистрация:
    12 окт 2015
    Сообщения:
    4
    Симпатии:
    0