panduan reka bentuk mel responsif: Buat e -mel anda dengan sempurna hadir pada pelbagai peranti

mata teras

• Apabila peranti mudah alih menjadi popular dalam bacaan e -mel, susun atur mel responsif mesti mengambil kira ciri -ciri peranti mudah alih. Ini memerlukan menyusun semula kandungan mel, dan mengatur sel-sel yang diatur secara mendatar secara menegak pada peranti mudah alih.
• susun atur mel tunggal-lajur (biasanya mengandungi imej tajuk tunggal) tidak memerlukan unsur penyusunan semula, hanya menyesuaikan lebar untuk memadankan saiz peranti. Ini adalah reka bentuk berskala dan bukan reka bentuk yang responsif.
• susun atur mel multi-lajur perlu menyusun semula lajur apabila lebar peranti berkurangan. Ini boleh dicapai dengan menggunakan jadual bersarang atau menukar sifat display sel meja. Yang terakhir adalah lebih elegan dan menggunakan peraturan CSS asli.
• Imej dalam e -mel responsif hanya memerlukan teknologi responsif klasik (img {max-width: 100%;}). Walau bagaimanapun, menggunakan pertanyaan media, satu imej boleh disembunyikan dan imej lain boleh digunakan sebagai imej latar belakang.

Dalam artikel sebelumnya mengenai penulisan siaran akhbar, kami telah mempelajari beberapa petua yang dapat mengubah cara e -mel anda muncul dalam pelanggan yang berbeza.

Di samping itu, kita mesti mempertimbangkan peranti mudah alih, yang semakin digunakan dalam bacaan e -mel. Ini menimbulkan masalah membina susun atur responsif untuk e -mel.

Oleh kerana kita tahu bahawa templat e -mel dibina dengan jadual HTML dan mempunyai CSS sebaris, kerja kita sedikit lebih rumit daripada biasa:

• Peraturan CSS dalam talian mempunyai nilai kekhususan yang tinggi (mereka sentiasa menang).
Jadual tidak direka untuk kombinasi susun atur, jadi kita harus memberi perhatian kepada gabungan e -mel dan ingat bahawa sel -sel (kedudukan mendatar semula jadi) harus diatur secara menegak pada peranti mudah alih.
Sudah tentu, kita tidak boleh menggunakan JavaScript.

kandungan dengan teliti. !important

susun atur tunggal lajur

susun atur tunggal lajur (biasanya hanya satu imej tajuk) tidak mempunyai keperluan khusus. Oleh kerana mereka tidak perlu menyusun semula unsur -unsur, kita hanya perlu ambil perhatian bahawa semua lebar diturunkan dengan elegan untuk memadankan saiz peranti. Ini bukan reka bentuk yang responsif, tetapi contoh klasik reka bentuk berskala (lihat berskala, cecair, atau responsif: memahami cara memindahkan mel).

susun atur tunggal-kolumn

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

susun atur multi-lajur

susun atur multi-lajur memerlukan penyusunan semula lajur apabila lebar peranti berkurangan. Sama ada anda menggunakan dua, tiga, atau lebih lajur, anda perlu memaparkannya secara menegak dan bukannya secara mendatar.

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}