CSS3 Media - Запросы Еще примеры
Давайте рассмотрим еще несколько примеров использования медиа запросов.
Мы начнем со списком имен, которые функционируют как почтовые ссылки. 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 по data-email атрибут. В HTML5, мы можем использовать атрибуты с префиксом data- для хранения информации. Мы будем использовать 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 до 1000 пикселей - предварить ссылки с текстом
Если ширина браузера находится между от 700 до 1000px, мы будем предварять каждую ссылку по электронной почте с текстом "Электронная почта:":
Пример 3
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
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 - Добавить иконку, как мы использовали раньше
Для браузера шириной выше 1151px, мы будем снова добавить значок, как мы использовали раньше.
Здесь мы не должны писать дополнительный блок медиа-запроса, мы можем просто добавить дополнительный медиа-запрос к нашему уже существующему с помощью запятой (это будет вести себя как 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;
}
}
Попробуй сам " 
Еще примеры
Используйте список электронных ссылок на боковой панели на веб - странице
Этот пример помещает список адресов электронной ссылки в левой боковой панели веб-страницы.