Примеры медиазапросов CSS3

В этой главе мы продемонстрируем несколько примеров мультимедийных запросов.

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

Пример 1

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}
</style>
</head>
<body>

<ul>
<li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li>
<li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li>
<li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li>
</ul>

</body>
</html>

Попробуйте сами »

Примечаниеdata-emailАтрибут. В HTML мы можем использовать сdata-Используйте атрибуты с префиксами для хранения информации.

Ширина от 520 до 699px - добавить значок электронной почты

Когда ширина браузера составляет от 520 до 699px, добавьте значок электронной почты перед ссылкой электронной почты:

Пример 2

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

Попробуйте сами »

От 700 до 1000px - добавить текстовую информацию с префиксом

Когда ширина браузера составляет от 700 до 1000px, добавьте "Электронная почта: " перед ссылкой электронной почты:

Пример 3

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Эл. почта: ";
        font-style: italic;
        color: #666666;
    }
}

Попробуйте сами »

Ширина больше 1001px — добавить адрес электронной почты

Когда ширина браузера больше 1001px, добавьте адрес электронной почты после ссылки.

Мы будем использоватьdata-атрибут, чтобы добавить адрес электронной почты после имени каждого человека:

Пример 4

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}

Попробуйте сами »

Ширина более 1151px - добавить иконку

Когда ширина браузера больше 1001px, перед именем человека будет добавлена иконка.

В примере мы не написали дополнительные блоки запросов; мы можем добавить другие медиазапросы после существующих медиазапросов, разделяя их запятыми (аналогично оператору OR):

Пример 5

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

Попробуйте сами »

Другие примеры

Использование ссылки на список рассылки в боковой панели веб-страницы
В этом примере в левую боковую панель веб-страницы добавляется список ссылок на электронную почту.

Другие расширения