Responsiivisuuden lisääminen HTML-viestipohjaan

Media Queryn avulla pystytään määrittelemään eri ulkoasu sitä tukeville mobiililaitteille. Ominaisuden lisääminen viestipohjaan vaatii HTML-osaamista.

Huom. suosittelemme Drag & Drop -viestiedtiorin käyttämistä, joka tekee viesteistä responsiivisia automaattisesti.

Media Query

Mobiilipohjan tyylimäärittelyt tehdään Media query -tagien sisään, joka tulee lisätä normaalien tyylimäärittelyjen loppuun juuri ennen lopetustagia </style> seuraavasti:

<style type="text/css">
 
/* normaalit tyylimäärittelyt tähän */
 
@media only screen and (max-device-width: 480px) {
   /* mobiilimäärittelyt tähän */
}
 
</style>

Attribute selectors

Yahoon webmail ei kunnioita tätä määrittelyä ja näyttää kaikki tyylit oletuksena. Tämä voidaan kiertää käyttämällä CSS-määrittelyjen tekemiseen ns. “attribute selectors” -tapaa seuraavasti:

Normaali tapa:

.mytable {
   width: 280px !important;
}

Attribute selectors -tapa:

table[class="mytable"] {
   width: 280px !important;
}