Создание адаптивного дизайна для сайта. Дизайн для всех экранов.
- Подробности
- Категория: Web-Дизайн
- Опубликовано 19.01.2013 11:46
В этой статье мы разберём принципы строения адаптивного ко всем экранам макета страниц сайта. Это не будет подробный до мелочей гайд со всеми различными подходами к построению адаптивного резинового дизайна. Это будет краткое руководство, что бы сделать простой адаптивный дизайн.
Адаптивным дизайном называют дизайн, который одинаково хорошо смотрится на всех экранах, начиная от мобильных и заканчивая с экранами с разрешением Full HD. Вся хтитрость таого дизайна в основном заложена в определённом построении CSS.
Изображения на странице
Для того чтобы картинки в ваших материалах корректно отображались на всех разрешениях, поставьте им CSS параметры:
max-width: 100%;
height: auto;
Т.е Если у вас в DIV с id="main" содержится тело материала, то в CSS файл пропишите:
#main img {
max-width: 100%;
height: auto;
}
Блоки Div на странице
Ширину блоков указывайте в процентном содержании. Например:
width:75.5%;
Убедитесь что суммарное количество процентов на одной высоте блоков составляет 100%.
Для того чтобы ограничить "растяциваемость" блока используйте CSS свойство:
max-width: 600px;
Это свойство не позволит блоку к которому применяется растянуться больше указанной ширины. Аналогично этому свойству вы можете использовать:
min-width: 300px;
Не трудно догадаться, что данный параметр указывает минимальную ширину, с которой может быть блок, к которому это свойство применяется.
Стили для каждого экрана
Можно использовать стили для каждого типа экрана, что может быть даже удобнее. Ниже показан шаблон CSS файла который вы должны надполнить своими параметрами:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Здесь будут стили для */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Здесь будут стили для смартфонов */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Здесь будут стили для смартфонов */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Здесь будут стили для Айпадов*/
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Здесь будут стили для Айпадов */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Здесь будут стили для Айпадов */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Здесь будут стили для ноутбуков и средних домашних ПК */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Здесь будут стили для широких экранов */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Здесь будут стили для IPhone 4 */
}
Исходя из вышепредставленных CSS параметров, вы можете сделать специальные стили для любого из экранов.
Заполнение пустых областей на экране
Рекомендуется почитать статью. В ней раскрывается тема, как сделать заполнение пустых областей на странице, в тоже время что бы страница не становилась "перегруженной"
Думаю основные принципы того как делается адаптивный вебдизайн понятны.