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
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
<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
- sel meja.
-
display
susun atur meja bersarang
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:
<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%;}
@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.
dan
sumber. Anda perlu menyediakan imej pelbagai img
untuk digunakan dalam semua julat ini, seperti contoh berikut: background-image
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!

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

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

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

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


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

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

Artikel Panas

Alat panas

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

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
Alat pembangunan web visual

Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna

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.
