Styles.css для адаптивного дизайна

Краткое содержание: Верстать адаптивный дизайн начиная с десктопа можно, но стили в CSS должны подаваться в первую очередь для мобильных устройств.

Как верстать адаптивный дизайн

Несмотря на то, что философия responsive web design предполагает создание сайта начиная с версии для мобильных устройств, для верстки этот подход неудобен. Верстать адаптивный сайт сначала для мобильных, потом для планшета, а затем для десктопа сейчас противоестественно для большинства разработчиков.

Совершенно нормально, если вы сверстаете адаптивный дизайн сначала для десктопа, а затем начнете разносить стили по media queries.

верстка responsive web design
Как и в любом деле, к верстке надо подходить с умом и делать так, как подсказывает здравая логика, а не бездумно следовать концепциям.

Сначала базовый дизайн

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

<!-- Базовый дизайн: -->
<link rel="stylesheet" href="/css/style.css">
<!-- Основной дизайн: -->
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="/css/480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="/css/600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="/css/768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="/css/992.css">

Самые примитивные устройства, например, простые телефоны, остановятся на базовом дизайне, потому что они не понимают media queries. Смартфоны подхватят базовый дизайн плюс 480.css. Смартфоны с большими разрешениями и планшеты с маленькими загрузят базовый дизайн плюс 480.css и 600.css. И так далее по возрастающей.

Количество точек CSS зависит от вашего дизайна. Вы также в праве выбирать разрешения, при которых дизайн будет меняться. Указанная выше градация CSS приведена только в качестве примера.

Оптимизируем CSS

Разделять стили по разным файлам удобно для разработчика, но плохо с точки зрения скорости загрузки сайта. Особенно для мобильных устройств. При релизе сайта стили лучше объединить в один style.css:

/* Базовый дизайн */
@media only screen and (min-width: 480px) { /* Основной дизайн */ }
@media only screen and (min-width: 600px) { /* Основной дизайн */ }
@media only screen and (min-width: 768px) { /* Основной дизайн */ }
@media only screen and (min-width: 992px) { /* Основной дизайн */ }
@media only screen and (min-width: 1382px) { /* Основной дизайн */ }

И, конечно, нужно не забыть подключить Respond.js для адаптивного дизайна в Internet Explorer.

Источник: http://wedeal.ru/blog/styles-css-dlya-adaptivnogo-dizayna/

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Styles.css для адаптивного дизайна | | 2014-04-25 07:35:16 | | Статьи Web-мастеру | | Краткое содержание: Верстать адаптивный дизайн начиная с десктопа можно, но стили в CSS должны подаваться в первую очередь для мобильных устройств. Как верстать адаптивный дизайн Несмотря на то, что | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: