Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Адаптивный веб-дизайн с использованием CSS3

19 октября 2013 | Опубликовано в css | 3 Комментариев »

Революция смартфонов привнесла новые особенности в веб-разработку, пришло время преобразовать дизайн вашего веб-сайта в адаптивный дизайн вместо того, чтобы поддерживать отдельную мобильную версию. Адаптивный дизайн автоматически подстроится, основываясь на размере экрана используемого устройства. Этот урок объясняет, как использовать свойство CSS3 @media и работать с Internet Explorer, используя библиотеку JavaScript Modernizr.

 

 

Скачать скрипт – Демо

Посмотрите, как выглядит демонстрация работы на экранах с разным разрешением.

Шаг 1

Макет веб-сайта разделен на три горизонтальные части: Hearder, Main и Footer. Блок Header разделен на две горизонталные части: Logo и Nav. Блок Main разделен таким же образом на Article and Sidebar.

Код HTML

<div id="header">
1 Header

<div id="logo">logo</div>
<div id="nav">links</div>
</div>

<div id="main">
2 Main

<div id="article">article</div>
<div id="sidebar">sidebar</div>
</div>
<div id="footer">
3 Footer
</div>

Каркас

CSS

*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

Шаг 2

Теперь работаем с тагом <ul>  неупорядоченного списка.

Код HTML

<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
....
....
</ul>
</div>

Каркас

CSS

ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

Шаг 3 — @media 768px

Работаем с экраном шириной не менее 768px.

Каркас @media 768px

CSS @media 768px

@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}
}

Шаг 4 — @media 1140px

Работаем с экраном шириной не менее 1140px.

Каркас @media 768px

CSS @media 768px

@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}
}

Шаг 5 — @media 480px

Работаем со списком блока навигации с шириной не менее 480px. Это применяется для экранов с шириной 480px и выше.

Каркас @media 480px

CSS @media 480px

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}
}

Modernizr

Modernizr – это библиотека JavaScript, которая определяет доступность стандартного исполнения для веб-технологий следующего поколения. Эти технологии – это новые возможности, которые являются результатом развивающихся спецификаций HTML5 и CSS3.

Код HTML

Для сохранения работоспособности в ранних версиях браузера Internet Explorer, таких как 7 и 8, нам надо подключить modernizr.min.js после таблицы стилей в тэге header.

Ссылка для скачивания

<!DOCTYPE html>
<!--[if lt IE 7]> 
<html>
<![endif]-->
<!--[if IE 7]> 
<html>
<![endif]-->
<!--[if IE 8]> 
<html>
<![endif]-->
<!--[if gt IE 8]> <!--> 
<html>
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>

<div id="header">

<div id="logo">Logo</div>
<div id="nav">

<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>

</div>

</div>

<div id="main">
<div id="article">Content Here</div>
<div id="sidebar">sidebar</div>
</div>

<div id="footer">
Footer
</div>
<body>
</html>

Теперь этот код отлично работает с Internet Explorer ранних версий.

Замечание: Modernizer не поддерживает свойства CSS, записанные в коде HTML.

Окончательный вариант CSS

*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}

@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}
}

Автор урока Srinivas Tamada.
Перевод — Дежурка.

Смотрите также:


�


Комментарии

  1. Ant
    22 октября 2013 в 9:04
    Thumb up Thumb down -1

    Гуд. Заюзаем.

  2. ееее
    24 октября 2013 в 20:50
    Thumb up Thumb down 0

    Забыли добавить самое важное — в конце, протестировать на реальных устройствах с разным размером пикселя и на разных ОС и с разными браузерами. Вот тогда-то и начнут вылезать косяки, и станет понятно что для реальной разработки адаптивного дизайна нужно тестирование на реальных гаджетах.

  3. Елена
    16 января 2017 в 13:32
    Thumb up Thumb down 0

    Спасибо!

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые