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;
}
Kommentit
0 kommenttia
Kirjaudu sisään jättääksesi kommentin.