Отзывчивая секция head HTML шаблона, которую я использую для верстки

Здравствуйте дорогие читатели!

Хочу поделиться с Вами HTML разметкой, которую я использую для верстки сайтов. В частности не всей разметкой, а лишь секцией head, для корректной работы отзывчивого макета. В работе над новыми проектами я использую HTML5, в принципе можно пользоваться html5boilerplate, но по сути каждый выбирает сам как работать.

Так вот мой html-документ начинается так:

<!Doctype html>
<!--[if IE 7 ]><html class="ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
<!--[if IE 9 ]><html class="ie9"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--><html> <!--<![endif]-->
<head>

	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width" />
	<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
	
	<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />

	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

	<script type="text/javascript" src="js/script.js"></script>
	
	<title>Название документа</title>
	
</head>

<body>

	...

</body>
</html>

Что тут происходит:

  1. Первым делом объявляем !Doctype — говорим браузеру какой тип документа он открывает
  2. Условными комментариями определяем версию браузера Internet Explorer, что облегчает изобретение «костылей», без всяких хаков
  3. Объявляем кодировку документа utf-8
  4. Включаем режим совместимости для браузеров Internet Explorer
  5. Задаем значение viewport — ширину устройства
  6. Запрещаем преобразование телефонов skype
  7. Подключаем таблицу стилей style.css
  8. Подключаем библиотеку jQuery — очень часто приходится использовать
  9. Для браузеров Internet Explorer ниже 9 версии, подключаем два скрипта с гугловских CDN: html5shim — создает элементы разметки HTML5, и css3-mediaqueries-js — для поддержки media-query в CSS
  10. Подключаем наши jQuery скрипты
  11. Последним делом объявляем title нашей страницы

Итак отзывчивость включили, и использовать ее в таблице стилей мы можем следующим образом

@media screen and (max-width: 1400px) {
	тут CSS правила
}
@media screen and (max-width: 1200px) {
	тут CSS правила
}
@media screen and (max-width: 1000px) {
	тут CSS правила
}

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

Всего хорошего! Замечания, пожелания, оставляйте в комментариях!

Добавить комментарий:

Комментарии
  1. JAH:
    11.06.2013 в 18:55

    Max, стили луше подключать через wp_enqueue_style() < - в кодексе wordpress почитай про эту штуку и создавать отдельный файл стилей для поиска нет необходимости, достаточно в файле header.php прописать такой вот body 

    <body <?php body_class(); ?>>
на выходе страницы поиска у body будет класс:

    <body class="search search-results">
    

    ну а дальше дело техники возни со стилями)
  2. Max Suharev:
    11.06.2013 в 06:43

    Оу код чтот вставился криво вот https://dl.dropboxusercontent.com/u/6498190/code.txt

  3. Max Suharev:
    11.06.2013 в 06:37

    Привет, Владимир. Решил я тут первый свой шаблон сверстать и выбрал для основы готовый кости «Bones — The HTML5 WordPress Starter Theme -» В этой чистой теме все стили подключаются через 

    

     что, меня немного смутило. 
    

     Я хотел сделать поиск в другой цветовой гамме, для этого создал отдельный css стиль и хотел подключить через вот такой код
    

    &lt;link rel=&quot;stylesheet&quot; href=&quot;/search.css" type="text/css" media="screen" /&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;" type="text/css" media="screen" /&gt;

    

    Но так как стили у меня подключаются через function, то у меня встала загвоздка. Как мне подключить отдельные стили для поиска в function?. А точнее там создается действие 
    

    require_once('library/bones.php');
    

     а там уже подключатся все стили.
    

    Еще вопрос как лучше выводить стили в WP? Как показано выше в статье или через отдельный php файл, подключенный к 
    

    

     ?
    

    В этом деле я еще новичок.
    
Спасибо за ответ.
    

    

    4. 

  4. 

    

    
	JAH:	
    

    
30.04.2013 в 22:21	
    

    Юрий, может быть, но форум скайпа рекомендует)
    
тут писал как еще можно запретить преобразование телефонов плагином ClickToCall
    

    

    5. 

  5. 

    

    
	Юрий:	
    

    
30.04.2013 в 00:33	
    

    Я про мета-тег SKYPE_TOOLBAR 🙂
    

    

    6. 

  6. 

    

    
	Юрий:	
    

    
30.04.2013 в 00:32	
    

    В HTML5 не проходит валидацию. Нет там такого тега.
    

    

    7. 












© 2021 Howtomake/