Latest web development tutorials

CSS3 Media Queries примеры

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

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

Пример 1

<! DOCTYPE HTML>
<HTML>
<Head>
<Style>
уль {
Список стиле типа: нет;
}

уль Ли а {
цвет: зеленый;
текст-отделка: нет;
обивка: 3px;
Дисплей: блок;
}
</ Style>
</ Head>
<Body>

<Ul>
<Li> <a data-email = "[email protected]" HREF = "mailto: [email protected]"> John Doe </ а> </ li>
<Li> <a data-email = "[email protected]" HREF = "mailto: [email protected]"> Mary Moe </ а> </ li>
<Li> <a data-email = "[email protected]" HREF = "mailto: [email protected]"> Аманда Panda </ а> </ li>
</ UL>

</ Body>
</ HTML>

Попробуйте »

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

520 до 699px ширина - добавить значок почтового ящика

При ширине браузера в 520 699px, почтовый ящик, прежде чем добавить ссылку значок Mail:

Пример 2

Экран @media и (макс-ширина: 699px) и (мин-ширина: 520px) {
уль Ли а {
обивка налево: 30px;
фон: URL (адрес электронной почты-icon.png) левый центральный не повторять;
}
}

Попробуйте »

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

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

Пример 3

Экран @media и (макс-ширина: 1000px) и (мин-ширина: 700px) {
уль Ли а: перед тем {
Содержание: "Электронная почта:";
стиль шрифта: курсив;
цвет: # 666666;
}
}

Попробуйте »

Больше чем 1001PX ширина - добавить адрес электронной почты

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

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

Пример 4

@media экран и (мин-ширина: 1001PX) {
уль Ли а: после того, как {
Содержание: "(" атр (данные -Е) ")";
размер шрифта: 12px;
стиль шрифта: курсив;
цвет: # 666666;
}
}

Попробуйте »

Больше чем 1151px ширина - добавить значок

Когда браузер шире 1001PX, имена будут добавлены перед иконой.

Например, мы не должны писать дополнительные блоки запросов, мы можем использовать в существующих медиа-запросов, разделенных запятыми, чтобы добавить дополнительные запросы средств массовой информации (подобный оператор ИЛИ):

Пример 5

@media экран и (макс-ширина: 699px) и (мин-ширина: 520px), (мин-ширина: 1151px) {
уль Ли а {
обивка налево: 30px;
фон: URL (адрес электронной почты-icon.png) левый центральный не повторять;
}
}

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

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

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