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

Есть сайт http://remodelov.ru .
В целом он адаптивный, но проблема с хэдером.
Как сделать шапку адаптивной кроссплатформенной?
Заранее спасибо за ответ.

 

а чего вам в ней не нравится) она адаптивна за исключением красоты если только)
для .topMenuStyleLine после 765px я бы назначил display:block;

Код:

@media only screen and (min-width:765px){
.topMenuStyleLine {
display: inline-block;
}
}

ну и по такому же принципу уменьшил шрифт телефону, ну может ещё и центровки сделал да и кнопочку уменьшил

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

 

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

 

Ставим себе 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 а ширину для блоков на %.

 

Спасибо за ответ. Но у меня уже прописана адаптивность через точные прописанные размеры в px под разрешения. Все переделывать не хотелось бы.

 

тогда просто подгоняй чтобы на разных устройсвах смотрелось хорошо

 

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

 

подскажите есть ли курсы пом адаптации если можно ссылку

 

stsa20014, Ну один курс есть в этой теме http://wmasteru.org/threads/Платные-курсы-по-верстке-бесплатно.14634/