Ребят, занимаюсь изучением верстки. Уже измучился, если честно. Все объекты на странице собрал, все хорошо. Начинаю масштабировать - все - труба дело. Подскажите самый хороший на ваш взгляд сервис, чтобы смотреть как отображается сайт на разных устройствах с разным разрешением. У меня на рабочей машинке 1024х600. За нетбуком сижу. Ну и ваши комментарии к расположению объектов/блоков не будут лишними. МАСШТАБ + сайт: madmark.ru
@Мефистофель, ставишь плагин Web Developer для браузера Mozilla. Заходишь на свой сайт. Жмешь в панели Resize -> View Responsive Layouts Результат:
Добавить в CSS: Код: .col-xs-12.text-center.abcen1 img { max-width: 100%; } Для авто масштабирования логотипа на малых разрешениях экранов. В результате будет так:
Лого съехал: Было так: Код: <address><br> <div style="font-family: micra-bold; font-size: 30px; width: 260px;" class="bord">MADMARK</div> Команда беспощадных маркетологов<br> Новосибирск, ул. Ро... Сделать так: Код: <div class="col-md-5 col-md-push-1 address"> <address><br> <div style="font-family: micra-bold; font-size: 30px; width: 260px;margin: 0 auto" class="bord">MADMARK</div> Команда беспощадных маркетологов<br> Новосибирск, ул. Ро... </address> </div> Результат: Можно через @media только для мобильных дописывать: margin: 0 auto;
оффтоп: сайт стал намного быстрее грузиться, после переноса шрифтов на локал. Правда гугловские еще тянутся: Код: <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'/> Ошибка: Код: <!doctype html> <!-- FlatFy Theme - Andrea Galanti /--> <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> <!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]--> <!--[if gt IE 9]><!--> <!--<![endif]--> <html> <title>MADMARK </title> <head> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter35059935 = new Ya.Metrika({ id:35059935, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> title должны быть внутри head Код: <!doctype html> <!-- FlatFy Theme - Andrea Galanti /--> <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> <!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]--> <!--[if gt IE 9]><!--> <!--<![endif]--> <html> <head> <title>MADMARK </title> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter35059935 = new Ya.Metrika({ id:35059935, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, trackHash:true, ecommerce:"dataLayer" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script>
Первое, чем займусь. По поводу лого: я просто коряво прописал сам.Создал класс бордер, где правый отступ поставил для того, чтобы рамка обрамляла не весь блок, а только текст (мэдмарк). Класс удалить и прописать границу иначе. Тогда лого не будет уплывать. Это второе, чем буду заниматься. Теперь по поводу тайтла внутри хэда - он там и был. Я с валидацией запарился - смотрю что да как и пытаюсь ошибки убрать. Не помню на что ругался, но после переноса за пределы хэда ошибка исчезла. Верну.
Если ты про ошибку валидации с метрикой - то ее можно поставить перед закрывающим </body> (если внизу ставить). Или после открывающего <body> вверху - тогда ошибка должна устраниться.
Еще ошибки, подгружаются не существующие объекты: Вот какую ошибку каждый такой объект выдаёт: А тебе оно надо, чтбы твой сайт вытягивал 20-30 раз ошибку 404? Файлы либо отсутствуют либо нет доступа / разрешений. Все эти ошибки - это лишние 2-3 сек загрузки сайта.
Я уже нервничать начал. Перепроверил. Вот ФТП: Здесь есть файл шрифта. Адрес правильный. Остается вариант, что нет прав. ТОлько как их дать-то? И кому?
Это все происки дьявола. Это зло. А зло надо искоренть. Изначально же кто-то эти шрифты прописал так? Я сейчас их просто удалю с сервера, но оставлю у себя в загашнике, чтобы потом выяснить проблему. Тему не закрываем.
@Jonny уже упомянул о специальном плагине для браузера Mozilla. Но хотелось бы дополнить и для двух других популярных браузеров. На стационарнике у меня стоит Google Chrome, пользуюсь расширением Window resizer. После установки запускается сочетанием клавиш Ctrl+стрелка вниз. А вот на ноутбуке Opera почему-то быстрее работает. На нем пользуюсь портом плагина Web Developer. Для эмуляции разрешения жмешь на шестеренку в строке плагинов (справа сверху по умолчанию), затем resize и View Responsibe Layouts
Значит смотри, есть такой framework от команды разработчиков Twitter'a - Bootstrap. Из себя он представляет css-файлик с огромным количеством классов, в которых прописано самые важные правила на момент верстки, а именно - ее адаптивность. Например, задаешь <div class="col-xs col-md ">, где -xs,md отвечают за поведение твоих блоков при маленьких\средних размерах экрана. Залезаешь в панель разработчика, смотришь исходный css код, и смотришь, как это все делается. И быстро, и качественно, и, в конце концов, спокойно разберешься и сможешь сам писать уже без использования фреймворка. Успехов!