Как сделать адаптивный шаблон CSS

Как сделать адаптивный шаблон 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
<span class="hljs-at_rule">@<span class="hljs-keyword">media</span> (min-width: <span class="hljs-number">900</span>px) </span>{
    <span class="hljs-tag">body</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#F5F5F5</span></span></span>;
    <span class="hljs-rule">}</span></span>

    <span class="hljs-class">.main</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">12</span>px</span></span>;
    <span class="hljs-rule">}</span></span>
}

<span class="hljs-at_rule">@<span class="hljs-keyword">media</span> (min-width: <span class="hljs-number">1000</span>px) </span>{
    <span class="hljs-tag">body</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#EEEEEE</span></span></span>;
    <span class="hljs-rule">}</span></span>

    <span class="hljs-class">.main</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">13</span>px</span></span>;
    <span class="hljs-rule">}</span></span>
}

<span class="hljs-at_rule">@<span class="hljs-keyword">media</span> (min-width: <span class="hljs-number">1100</span>px) </span>{
    <span class="hljs-tag">body</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#E5E5E5</span></span></span>;
    <span class="hljs-rule">}</span></span>

    <span class="hljs-class">.main</span> <span class="hljs-rules">{
        <span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">14</span>px</span></span>;
    <span class="hljs-rule">}</span></span>
}
(Просмотрено 178 раз, 1 раз за сегодня)

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *