Kotak cara untuk membina e -mel responsif

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.

gambar yang disediakan oleh: fishbulb1022

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.

bernasib baik, kebanyakan peranti mudah alih mempunyai keserasian yang tinggi dengan peraturan CSS moden, jadi kami dapat menyelesaikan semua masalah ini dengan pertanyaan media, menggunakan banyak pengisytiharan

kandungan dengan teliti. !important

Untuk projek-projek sedemikian, adalah penting untuk mengamalkan pendekatan "mudah alih pertama", mengelakkan susun atur yang tidak dapat disusun dengan betul pada peranti kecil.

Sila ambil perhatian bahawa walaupun dalam artikel ini kita hanya membincangkan isu -isu responsif, mel mudah alih responsif tidak semestinya mel yang baik. Reka bentuk e -mel mudah alih yang berkesan melibatkan banyak elemen, termasuk saiz fon, kombinasi susun atur, dan banyak lagi: ini adalah tugas yang sangat penting, yang akan kami sampaikan dalam artikel lain.

mod susun atur mel

Mengenai respons, kita dapat mengenal pasti dua jenis mel: lajur tunggal dan pelbagai lajur.

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

Untuk memastikan bahawa e -mel anda diubahsuai dengan betul, anda hanya perlu menyesuaikan lebar jadual:

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

</table>

anda juga perlu mengubah saiz imej (lihat perenggan "Mengenai Imej" pada akhir artikel ini) dan mengubah saiz fon, tetapi tidak ada keperluan khas lain.

@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.

Terdapat dua cara mudah untuk mencapai ini:

menggunakan jadual bersarang

Tukar harta
1. sel meja.
2. display susun atur meja bersarang

Kombinasi e -mel biasanya memerlukan penggunaan jadual bersarang. Ini sentiasa dianggap cara terbaik untuk memastikan keserasian pelanggan, tetapi sebaliknya, kod yang dihasilkan sangat mengelirukan dan sebenarnya sukar dibaca.

Caranya ialah menggunakan atribut

, yang menyebabkan jadual diselaraskan secara mendatar.

Setiap elemen mesti mempunyai

spesifik table align="left" lebar, dan jumlah mereka mestilah sama dengan nilai kontena mereka.

Apabila lebar peranti berkurangan, kita perlu mengubah saiz bekas dan memaksa semua lajur jadual hingga lebar 100%.

Teknik ini memastikan keserasian dengan kebanyakan pelanggan: Saya menguji fail demo dalam litmus dan semua pelanggan mendapat hasil yang baik, yang membolehkan amaran berikut:

Outlook 2007, 2010, dan 2013 (versi Outlook ini menggunakan Microsoft Word sebagai enjin rendering: lihat Panduan Perbezaan Microsoft Outlook pada blog Litmus);

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;
    }
}

Versi tertua Lotus Notes;

Gmail Android App.

• ini adalah titik permulaan yang baik (lihat di bawah untuk beberapa keputusan ujian), kita juga harus menganggap bahawa ujian ini dibina dengan jadual kosong: tambah kandungan (dan lebih banyak jadual bersarang !!) Anda harus dapat Betulkan semua kesilapan dan buat teknologi ini berfungsi dengan baik dengan semua pelanggan.
• sebahagian daripada hasil ujian keserasian litmus

Tukar harta paparan sel meja

Kaedah kedua membina mesej berbilang lajur adalah lebih elegan dan menggunakan peraturan CSS asli.

Teknik ini melibatkan perubahan sifat display sel jadual lalai apabila lebar peranti dikurangkan (anda boleh menemui banyak contoh pada responsifailpatterns.com). Ini menyebabkan sel-sel untuk menyambung semula secara menegak:

Tukar pelan paparan

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

</table>

Hasil ujian ini sangat baik: semua pelanggan memberikan mel ujian dengan betul (kadang -kadang terdapat kesilapan halus), tetapi ingat bahawa kami telah mencuba mel kosong dan hasilnya mungkin berbeza -beza selepas menambah kandungan.

mengenai imej

Dalam mel responsif, imej hanya memerlukan teknologi responsif klasik yang kami gunakan sekarang di web (). img {max-width: 100%;} Walau bagaimanapun, seperti yang dicadangkan dalam panduan reka bentuk mel responsif Monitor Kempen, menggunakan pertanyaan media, anda boleh menyembunyikan satu imej dan menggantikannya dengan imej lain sebagai imej latar belakang.

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

ingat bahawa walaupun imej yang tersembunyi melalui CSS akan dimuatkan pada pelanggan, jadi sedar ini.

Pilihan yang baik adalah menggunakan imej yang sama untuk tag

dan

sumber. Anda perlu menyediakan imej

pelbagai img untuk digunakan dalam semua julat ini, seperti contoh berikut: background-image

Selepas memilih imej yang sesuai, anda boleh menggunakannya untuk banyak titik putus pertanyaan media. Sebaik sahaja anda sudah bersedia, anda hanya perlu menambah sedikit peraturan CSS:

anda juga boleh menambah atribut

untuk menyesuaikan setiap paparan breakpoint (perhatikan sokongan pelanggan untuk peraturan ini).

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;
    }
}

Malangnya, ini tidak mungkin menyelesaikan semua keperluan anda untuk peranti berkepadatan tinggi-tetapi ia dapat mengurangkan bilangan fail yang dimuatkan untuk semua kes lain.

background-size Kesimpulan

Jadi, adakah teknologi penciptaan e -mel yang paling serba boleh, serba boleh, dan terbaik yang pernah ada?

Biasanya, jawapannya tidak. Setiap projek memerlukan pendekatan yang berbeza dan terdapat penyelesaian terbaik

yang berbeza

. Jawapan sebenar adalah untuk menguasai pelbagai teknik berguna dan sentiasa mencuba kaedah baru.

Sumber

3
• https://www.php.cn/link/90e08c6d15d206857d4fd54FA2f334bc
• https://www.php.cn/link/ae0de04da95f06c3c85934ea84bcccc0
• https://www.php.cn/link/A35E2F4A3FA64EE63AB18D8072B3A806
• https://www.php.cn/link/3d4233a54febe35fbf7749c3affb8e15
• https://www.php.cn/link/00b5d2692a781b6a9d3d15222c6e9d1ad
• https://www.php.cn/link/7006bc554a1a9de85c416551c10368e2
• soalan yang sering ditanya mengenai membina mel responsif
(bahagian FAQ yang disediakan dalam teks asal ditinggalkan di sini, kerana kandungan bahagian ini kurang sukar untuk ditulis semula dan lebih lama daripada bahagian lain teks asal. Untuk mengelakkan terlalu lama output, ia ditinggalkan di sini.)

Atas ialah kandungan terperinci Kotak cara untuk membina e -mel responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!