cari
RumahPeranti teknologiindustri ITKotak 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.

A Box of Tricks for Building Responsive Email

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 A Box of Tricks for Building Responsive Email

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: A Box of Tricks for Building Responsive Email

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

A Box of Tricks for Building Responsive Email 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:

A Box of Tricks for Building Responsive Email

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. A Box of Tricks for Building Responsive Email

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:

A Box of Tricks for Building Responsive Email

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

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

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Surat berita pemaju 21 teratas untuk melanggan pada tahun 2025Surat berita pemaju 21 teratas untuk melanggan pada tahun 2025Apr 24, 2025 am 08:28 AM

Tinggal maklumat mengenai trend teknologi terkini dengan surat berita pemaju teratas ini! Senarai ini menawarkan sesuatu untuk semua orang, dari peminat AI ke pemaju backend dan frontend yang berpengalaman. Pilih kegemaran anda dan menjimatkan masa mencari rel

Paip pemprosesan imej tanpa pelayan dengan AWS ECS dan LambdaPaip pemprosesan imej tanpa pelayan dengan AWS ECS dan LambdaApr 18, 2025 am 08:28 AM

Tutorial ini membimbing anda melalui membina saluran paip pemprosesan imej tanpa pelayan menggunakan perkhidmatan AWS. Kami akan membuat frontend next.js yang digunakan pada kluster ECS Fargate, berinteraksi dengan Gateway API, Fungsi Lambda, Bucket S3, dan DynamoDB. Th

CNCF Arm64 Pilot: Impak dan WawasanCNCF Arm64 Pilot: Impak dan WawasanApr 15, 2025 am 08:27 AM

Program perintis ini, kerjasama antara CNCF (Yayasan Pengkomputeran Native Cloud), pengkomputeran ampere, equinix metal, dan digerakkan, menyelaraskan ARM64 CI/CD untuk projek GitHub CNCF. Inisiatif ini menangani kebimbangan keselamatan dan prestasi lim

Membina pengimbas kelemahan rangkaian dengan pergiMembina pengimbas kelemahan rangkaian dengan pergiApr 01, 2025 am 08:27 AM

Pengimbas kelemahan rangkaian berasaskan GO ini dengan cekap mengenal pasti kelemahan keselamatan yang berpotensi. Ia memanfaatkan ciri konkurensi Go untuk kelajuan dan termasuk pengesanan perkhidmatan dan pemadanan kelemahan. Mari kita meneroka keupayaan dan etika

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.