Шпаргалка для адаптивной верстки

9 Июль 2014 3 комментария

Адаптивная верстка (она же респонсивная верстка — от англ. responsive) делается очень легко, настройки для всех расширений экранов прописываются в одном общем файле стилей.

Сначала пишутся общие стили, например обнуление полей и рамок, свойства шрифта.

А в самом конце css файла обычно прописывают специфические настройки для конкретных экранов, ширина экрана задается так:

1
2
3
4

@media only screen and (min-width: 1382px) {
     display:block;
     width:100%;
}

Логика проста, сначала применяются общие настройки, а потом специфические, зависящие от размера экрана устройства.

Шпаргалка для адаптивной верстки

Шпаргалка для адаптивной верстки

Краткие CSS настройки для популярных расширений экранов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* Десктоп с большими разрешениями, телевизоры */
 
@media only screen and (min-width: 1382px) {
 
}
/* Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп */
 
@media only screen and (min-width: 992px) {
}
/* Планшеты в режиме portrait */
 
@media only screen and (min-width: 768px) {
}
/* Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone  и так далее */
 
@media only screen and (min-width: 480px) {
}

Подробные CSS настройки для расширений экранов мобильных устройств:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/* monitors and laptops */
@media screen and (min-width: 1240px)  {}
 
/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px)  {}
 
@media screen and (min-width: 768px) and (max-width: 1024px) {}
 
/* mobile */
@media screen and (max-width: 768px) {}
 
/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {}
 
/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
 
/* iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
 
/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
 
/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {}
 
/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}
 
/* iPad 1 & 2 in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}
 
/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}
 
/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
 
/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {}
 
/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}
 
/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {}
 
/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}
 
/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
 
/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}
 
/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
 
/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}
 
/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}

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

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

3 Комментариев

  1. talgautb 20.07.2014 / 18:09

    Адаптивный и отзывчивый (responsive) имеют разные значения и разный эффект для сайта

  3. Denis 21.05.2015 / 22:48

    Главное чтоб Гуглу нравился )))

Комментарии к этой статье отключены.