Gambaran keseluruhan

Menjelang 2024, peranti mudah alih akan menyumbang lebih separuh daripada semua trafik Internet. Komputer riba atau komputer meja bukan lagi alat yang diperlukan untuk ramai orang, yang semakin menggunakan telefon pintar dan tablet untuk meneroka web. Internet kini mengutamakan mudah alih, sama ada untuk produktiviti, media sosial atau e-dagang. Disebabkan perubahan ini, reka bentuk web responsif adalah penting untuk memastikan tapak web berfungsi dan kelihatan baik pada pelbagai skrin dan peranti.

Kami tahu ia boleh memakan kos dan memakan masa untuk dibangunkan untuk pelbagai platform, terutamanya apabila mencipta apl mudah alih asli. Ia memerlukan beberapa pangkalan kod, pasukan khusus dan penyelenggaraan platform yang berterusan untuk membangunkan apl yang berbeza untuk iOS, Android dan web. Perniagaan menanggung perbelanjaan yang lebih tinggi akibatnya, dan pelancaran ciri diperlahankan. Kerumitan dipertingkatkan oleh kesukaran pembangun masih mempunyai mengekalkan penyesuaian khusus platform.

Terdapat beberapa cara untuk menjadikan pengaturcaraan berbilang platform menjadi kurang rumit. Penggunaan semula kod merentas platform dimungkinkan oleh rangka kerja hibrid seperti Flutter, React Native dan Progressive Web Apps (PWA). Namun begitu, penyelesaian ini selalunya mempunyai kelemahan.

Dalam siaran hari ini kita akan bercakap tentang tapak web responsif sebagai penyelesaian yang berpotensi untuk membina aplikasi berbilang platform.

Laman web responsif

Tapak web responsif ialah tapak web yang dibuat untuk menukar fungsi, kandungan dan reka letaknya secara dinamik mengikut platform, saiz skrin dan orientasi pengguna. Tanpa memerlukan versi tapak web yang berasingan, tapak web responsif menjamin bahawa bahan tersebut direka bentuk untuk pengalaman tontonan yang optimum pada setiap peranti, sama ada pengguna mengaksesnya dari desktop, komputer riba, tablet atau telefon pintar.

Apabila anda menggunakan reka bentuk web responsif, anda hanya perlu menulis dan mengurus satu pangkalan kod yang berfungsi merentas desktop, tablet dan peranti mudah alih. Berbanding dengan mencipta apl yang berbeza untuk iOS, Android dan web, ini mengurangkan kerumitan dan kos pembangunan.

Bagaimana untuk melaksanakannya?

Untuk melaksanakan tapak web responsif, anda perlu menggunakan teknik css yang berbeza seperti reka letak fleksibel (seperti grid), imej boleh skala dan pertanyaan media dalam CSS untuk melaraskan reka bentuk tapak berdasarkan saiz skrin peranti. Dengan menentukan titik putus, anda boleh menukar reka letak dan penggayaan elemen apabila skrin semakin kecil atau lebih besar. Sebagai contoh, anda boleh bertukar daripada reka letak desktop berbilang lajur kepada reka letak mudah alih satu lajur, memastikan pengalaman pengguna yang lancar merentas semua peranti. Berikut ialah contoh menggunakan pertanyaan media untuk mengendalikan titik putus mudah alih:

/* Desktop styles */
.container {
  display: flex;
  padding: 20px;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .container {
    display: block;
    padding: 10px;
  }
}

Reka letak dalam contoh ini berubah daripada reka letak blok pada peranti yang lebih kecil kepada reka letak kotak flex pada peranti yang lebih besar. Ini meningkatkan kemesraan mudah alih kandungan tanpa memerlukan reka bentuk semula yang lengkap.

Bonus: CSS mungkin tidak memerlukan perubahan drastik

Selalunya tidak perlu mengubah reka letak tapak web responsif yang direka bentuk dengan baik untuk peranti mudah alih secara mendadak. Anda boleh menjadikan tapak web anda responsif kepada skrin mudah alih dengan mudah dengan menukar reka letak kepada format satu lajur dan membuat pelarasan kecil pada saiz dan pelapik. Bahagian tertentu boleh dibuat mesra mudah alih jika perlu, tetapi pangkalan kod asas kekal sama, mengurangkan lebihan.

Cabaran

Evolusi laman web responsif

Dengan keupayaan baharu seperti Grid, Flexbox dan pertanyaan media lanjutan yang hampir disokong sepenuhnya oleh penyemak imbas kontemporari, CSS telah menyaksikan perkembangan yang ketara. Selain itu, sokongan JavaScript telah meningkat dengan ketara, bertindak secara konsisten dalam kebanyakan penyemak imbas. Untuk membantu pereka bentuk mengurus peranti mudah alih dengan ketinggian skrin dinamik (seperti yang mempunyai takuk atau papan kekunci pada skrin), unit baharu seperti dvh (Dynamic Viewport Height) sedang dibangunkan.

/* Example using dvh unit */
.header {
  height: 100dvh; /* Adjusts based on available viewport height */
}

Walaupun dengan perkembangan ini, mencipta tapak web mesra mudah alih yang responsif sepenuhnya tetap sukar. Menggunakan Pekerja Perkhidmatan untuk membangunkan apl web yang mengutamakan luar talian boleh menjadi mencabar dan terdedah kepada kesilapan. Tambahan pula, walaupun terdapat peningkatan, Safari pada iOS masih ketinggalan di belakang pelayar lain dari segi konsistensi dan sokongan, dan beberapa isu masih dilaporkan. Selain itu, pembangun mungkin perlu menangani keadaan kelebihan tambahan yang ditimbulkan oleh pengguna pada peranti atau penyemak imbas yang sudah lapuk.

Contoh dunia sebenar: Aplikasi kami

Sebagai contoh, kami ingin menunjukkan aplikasi kami: Touchlead, perisian automasi pemasaran.
Untuk mencapai sokongan mudah alih, kami membina aplikasi web kami menggunakan Tailwind CSS.
Kami mencipta reka letak mesra mudah alih dengan mudah, menggunakan kelas utiliti seperti md:flex-col untuk melaraskan titik putus mudah alih. Contohnya, pada desktop, kami menggunakan reka letak fleksibel mendatar dan pada mudah alih, kami bertukar kepada reka letak lajur, semuanya dengan perubahan kod yang minimum.

<div class="flex flex-col md:flex-row p-4">
  <div class="flex-1">Content 1</div>
  <div class="flex-1">Content 2</div>
</div>

Strategi ini telah membolehkan kami mengekalkan asas kod kami secara konsisten sambil menjamin pengalaman pengguna desktop dan mudah alih yang hebat.

Kesimpulan

Mari beritahu kami pendapat anda tentang tanggungjawab dalam reka bentuk tapak web pada tahun 2024.
Adakah anda menggunakannya untuk membina tapak dan aplikasi anda, atau adakah anda menganggap cabarannya terlalu tinggi?
Pendapat dan pengalaman anda tentang reka bentuk web responsif akan sangat dihargai.
Pernahkah anda menghadapi kesukaran semasa membuat kandungan untuk banyak platform?
Pemulihan yang manakah telah anda temui paling berkesan? Beritahu kami pendapat anda!

Atas ialah kandungan terperinci Bagaimanakah prestasi tapak web responsif dalam 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!