Latest web development tutorials

CSS3 Media Queries esempi

In questo capitolo ci mostrerà alcuni esempi per il multimedia.

Prima di iniziare a fare un elenco di link alla casella di posta elettronica. codice HTML è il seguente:

esempio 1

<! DOCTYPE html>
<HTML>
<Head>
<Style>
ul {
list-style-type: none;
}

ul li a {
colore: verde;
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]"> Maria Moe </ a> </ li>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> Amanda Panda </ a> </ li>
</ Ul>

</ Corpo>
</ Html>

Prova »

Si noti che i data-email proprietà. In HTML possiamo usare con data- prefisso attributo per memorizzare le informazioni.

520 a 699px di larghezza - aggiungere l'icona casella di posta

Quando la larghezza del browser nel 520 per 699px, la cassetta postale prima di aggiungere il link sull'icona Posta:

esempio 2

schermo @media e (max-width: 699px) e (min-width: 520px) {
ul li a {
padding-left: 30px;
fondo: url (e-mail-icon.png) centro sinistra no-repeat;
}
}

Prova »

700 a 1000px - aggiungere testo le informazioni del prefisso

Quando la larghezza del browser 700 a 1000 px, collegherà una casella di posta prima di aggiungere "E-mail:":

esempio 3

schermo @media e (max-width: 1000px) e (min-width: 700px) {
ul li a: prima {
tenore: "E-mail:";
font-style: italic;
color: # 666666;
}
}

Prova »

Maggiore di 1001PX larghezza - Aggiungi indirizzo e-mail

Quando il browser è più ampio rispetto 1001PX, verrà aggiunto il contatto e-mail dopo il link.

Usiamo data- attributi per aggiungere indirizzi e-mail dopo ciascuno dei nomi:

esempio 4

@media schermo e (min-width: 1001PX) {
ul li a: dopo {
tenore: "(" attr (dati -email) ")";
font-size: 12px;
font-style: italic;
color: # 666666;
}
}

Prova »

Maggiore di 1151px di larghezza - aggiungere l'icona

Quando il browser è più ampio rispetto 1001PX, saranno aggiunti i nomi di fronte all'icona.

Esempio, non c'è bisogno di scrivere blocchi di query aggiuntivi, possiamo usare le media query esistenti separati da virgole per aggiungere ulteriori domande dei media (simile operatore OR):

esempio 5

schermo @media e (max-width: 699px) e (min-width: 520px), (min-width: 1151px) {
ul li a {
padding-left: 30px;
fondo: url (e-mail-icon.png) centro sinistra no-repeat;
}
}

Prova »
Esempi

Altri esempi

Utilizzare il collegamento mailing list in una pagina Web barra laterale
Gli esempi nella colonna di sinistra della pagina per aggiungere una mailing list di link.