Bagaimana anda boleh menggunakan komponen web responsif hari ini

Beberapa tahun yang lalu saya mula mendengar banyak tentang komponen web. Saya mendapat sangat teruja dan kemudian terlupa sepenuhnya tentang mereka kerana bunyi bising diselesaikan. Ternyata ada pergerakan dan sokongan yang baik mula meningkat. Komponen web responsif, khususnya, ditetapkan untuk memudahkan bagaimana kita mendekati reka bentuk responsif. Seperti yang menjanjikan seperti ini, terdapat empat soalan yang banyak pemaju di luar sana akan ingin tahu sebelum mereka mula menggunakannya hari ini:

akan mereka ...

masuk ke dalam keadaan semasa web?
kerja penyemak imbas silang?
menyesuaikan diri dengan sesuai dengan ruang yang mereka jatuh ke dalam?
mempromosikan kod modular?

Dalam artikel ini, kami akan meneroka jawapan kepada setiap soalan!

Takeaways Key

Komponen Web adalah spesifikasi W3 yang membolehkan pemaju membina elemen HTML mereka sendiri, menjadikannya mungkin untuk membuat unsur -unsur UI yang tidak wujud secara asli dalam penyemak imbas atau membungkus komponen yang biasa digunakan seperti butang sosial atau melanggan bentuk ke dalam modul yang terkandung .
Komponen web responsif boleh dibuat lebih fleksibel dan mudah disesuaikan menggunakan teknik seperti pertanyaan media, flexbox, pertanyaan elemen, dan atribut. Teknik -teknik ini membolehkan komponen menyesuaikan diri dengan saiz dan konteks skrin yang berbeza, menjadikannya benar -benar responsif.
Penggunaan komponen web membolehkan penciptaan perpustakaan dengan satu sumber kebenaran untuk setiap komponen, mengurangkan pengulangan kod dan membolehkan perkongsian komponen dengan pemaju atau pemilik laman web lain. Pendekatan ini menggalakkan kod modular dan memudahkan pendekatan reka bentuk responsif.

What Are Web Components?

Pada dasarnya, mereka adalah spesifikasi W3 yang membolehkan anda membina elemen HTML anda sendiri. Sekiranya anda benar -benar tidak tahu apa -apa tentang mereka, ia mungkin bernilai membacanya dengan cepat tentang mereka sebagai beberapa istilah yang saya gunakan dalam artikel memerlukan pemahaman asas.

mengapa saya mahu menggunakannya?

Contoh yang baik apabila anda mungkin mahu menggunakan komponen web adalah apabila anda sedang membina UI yang tidak wujud secara asli dalam penyemak imbas - unsur -unsur seperti pemetik warna, karusel, akordion atau typeaheads. Sebagai alternatif, anda mungkin mempunyai beberapa komponen yang anda gunakan sepanjang masa di pelbagai laman web yang anda sakit membina semula setiap masa. Ini adalah perkara seperti butang sosial, melanggan bentuk atau pemberitahuan. Dengan komponen web, anda boleh membungkus markup, gaya dan skrip anda ke dalam modul yang terkandung menggunakan tag HTML seperti untuk merujuknya. Ini akan kelihatan biasa jika anda telah menggunakan arahan sudut atau komponen React tetapi manfaat di sini adalah bahawa ia berasal dari pelayar dan kerangka agnostik.

Komponen web membolehkan anda membina kepingan UI sekali dan menggunakannya di mana -mana. Ini sesuai untuk projek -projek seperti gaya hidup yang hidup di mana anda ingin membina perpustakaan dengan satu sumber kebenaran untuk setiap komponen anda. Pendekatan ini bermaksud mengulangi kurang kod dan mempunyai komponen mudah alih yang anda atau pasukan anda hanya dapat menjatuhkan rujukan ke dalam antara muka anda.

Satu lagi kelebihan besar menggunakan komponen web adalah keupayaan untuk membungkus komponen ini dan berkongsi dengan pemaju atau pemilik laman web lain. Pada asasnya, pengguna boleh meletakkan penyata import di laman web mereka seperti:

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

kemudian gunakan tag elemen tersuai yang telah anda tentukan dalam komponen itu. Dengan ini diimport ke laman web mereka, mereka boleh mempunyai banyak contoh komponen tersuai pada halaman mereka seperti yang mereka kehendaki. Dalam contoh borang melanggan, kita boleh menggunakan tag di pelbagai lokasi pada halaman. Sudah tentu, jika anda melakukan ini, anda perlu memastikan bahawa komponen yang indah yang anda buat sangat fleksibel dan akan berfungsi di pelbagai peranti dan saiz skrin.

Menghidupkan anak -anak lelaki yang buruk ini ke dalam komponen web responsif

Saya rasa cara terbaik untuk menunjukkan adalah dengan contoh, jadi saya akan meneruskan dengan borang langganan yang merupakan sekeping UI biasa yang tidak banyak berubah di antara laman web dan pelaksanaan yang berbeza.

inilah yang saya buat sebelum ini:

di dalam templat komponen web saya mempunyai beberapa markup asas untuk borang.

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

markup dan css saya tersimpan di dalam komponen saya menggunakan bahagian shadow dom spesifikasi. Ini memberi saya enkapsulasi, yang membolehkan saya menggunakan label dan pemilih input secara bebas dalam kod saya tanpa bimbang dengan gaya pendarahan lain atau pendarahan saya ke tapak induk.

Untuk kejelasan dan keringkasan, saya tidak akan menulis gaya selain yang digunakan untuk susun atur. Saya telah menggunakan gabungan terapung: kiri dan paparan: jadual untuk mencapai susun atur ini untuk mengelakkan pecahnya dalam sebarang lebar.

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

Saya akan menggunakan import HTML untuk menariknya ke tapak Sitepoint sebagai demonstrasi:

Sekarang kita semua ditubuhkan, mari kita lihat beberapa teknik responsif.

pertanyaan media

Pendekatan klasik yang kita tahu dan cinta masih hidup dan baik di dalam komponen web responsif. Ini boleh digunakan di dalam templat anda apabila anda kod komponen anda jika anda ingin membakar dalam beberapa titik putus, atau anda boleh memohon cangkuk (contohnya, dengan menggunakan kelas) ke bekas jika anda ingin meninggalkan keputusan itu kepada pengguna anda. Dalam kes ini, semua yang perlu kita lakukan ialah melepaskan terapung dan menyesuaikannya dengan lebar penuh.

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

Walau bagaimanapun, pertanyaan media tidak akan cukup untuk menyelamatkan kita kali ini.

Saya gembira dengan gaya bentuk pendaftaran saya dan ia berfungsi dengan baik di dalam badan, tetapi apa yang berlaku apabila penulis laman web ingin mencubanya ke bar sisi mereka? Tiba -tiba bentuk saya kelihatan tergelincir dan tidak boleh digunakan.

Ini kerana komponennya tidak menyedari sempadannya - ia tidak mempunyai konteks.

keseluruhan titik komponen web adalah anda boleh menjatuhkannya di mana -mana dan mereka hanya akan berfungsi dengan betul? Jadi jelas ini tidak akan dilakukan, tetapi terdapat beberapa teknik yang boleh anda gunakan untuk memastikan komponen anda responsif dan kontekstual.

Flexbox Trickery

Jika anda melihat menggunakan komponen web, kemungkinan anda hanya menyokong penyemak imbas moden dan tidak bimbang tentang IE9, dalam hal ini, sedikit sihir Flexbox mungkin sempurna untuk anda mengubahnya menjadi komponen web responsif. Ini adalah pendekatan pilihan saya kerana ia tidak memerlukan javascript tambahan.

Sekali lagi, sampel kod di sini semata -mata menunjukkan gaya susun atur yang saya gunakan:

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

dengan menetapkan bekas untuk memaparkan: flex; Flex-Wrap: Bungkus, unsur-unsur .Form__item akan muncul bersebelahan, tetapi kita masih perlu membuat beberapa pelarasan supaya apabila bekas menjadi terlalu kecil, mereka akan menyusun dengan baik.

Di dalam .Form__item, saya telah menggunakan flex shorthand flex: 1 0 320px; yang diterjemahkan dalam istilah flex untuk - tumbuh satu, flex mengecilkan sifar, dan asas flex sebanyak 320 piksel. Mempunyai Flex-Wrap yang ditetapkan untuk membungkus bermakna ia tidak akan menjadi lebih kecil daripada asas yang kami tetapkan (320px) tetapi menetapkannya ke Flex bermakna ia akan mengambil sisa ruang yang ada.

Saya telah memberikan rawatan yang sama kepada elemen label dan input. Nilai flex gabungan mereka jumlah 320, yang bermaksud mereka akan berkelakuan seperti yang dikehendaki pada saiz kontena yang lebih kecil.

Dengan penyesuaian ini, mari kita lihat bentuk yang sama di bar sisi SitePoint:

jauh lebih baik! Walau bagaimanapun, terdapat lebih daripada satu cara untuk kulit kucing.

Queries Element

Idea pertanyaan elemen adalah bahawa anda dapat mencontohi fungsi jenis pertanyaan media tetapi pada tahap komponen - sangat berguna untuk komponen web responsif. Pada dasarnya, bayangkan dapat menulis sesuatu seperti ini di CSS anda:

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

dengan pertanyaan elemen yang betul -betul boleh kita lakukan. Cukup kuat betul?

Malangnya, teknik ini tidak tersedia secara asli kerana vendor penyemak imbas yang berkenaan dengan potensi untuk menyebabkan gelung yang tidak terhingga. Walau bagaimanapun, sesetengah orang pintar telah menulis plugin untuk membolehkan fungsi ini.

Dalam contoh saya, saya telah menggunakan pertanyaan elemen CSS oleh Marc J Schmidt yang merupakan pelaksanaan yang sangat bagus. Terdapat juga projek serupa berikut:

• Elementary
• pertanyaan elemen
• eq.js

Pada dasarnya apa yang mereka lakukan ialah menggunakan JavaScript untuk mengesan lebar komponen dan mengubah suai atribut supaya anda dapat menggayakannya dalam CSS. Ada yang didorong oleh acara dan beberapa berdasarkan saiz semula.

<span><span><span><link> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

dengan gabungan salah satu plugin ini dan coretan kod kecil yang serupa dengan yang di atas kita dapat mendapatkan hasil yang sama seperti pelaksanaan Flexbox di bar sisi.

atribut

Salah satu perkara yang sejuk yang boleh kami tawarkan kepada pengguna komponen web responsif kami adalah API melalui atribut. Sebagai contoh, anda boleh menyediakan atribut yang dipanggil susun atur dan mempunyai saiz "kecil" dan "besar". Pengguna komponen kami kemudiannya boleh menggunakannya seperti berikut:

<span><span><span><ul> class<span>="form"</span>></ul></span> 
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Name:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><li> class<span>="form__item"</span>></li></span>
</span>    <span><span><span><label> for<span>="name"</span>></label></span>Email:<span><span></span>></span>
</span>    <span><span><span><input> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span></span></span>

Ini akan mencetuskan gaya untuk pelaksanaan kecil.

Dalam bayang -bayang dom, elemen yang mengandungi dikenali sebagai: Host. Contohnya boleh kelihatan seperti:

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

Ini kemudian akan membolehkan pengguna komponen menulis beberapa JavaScript mudah untuk membalikkan saiz yang berbeza yang anda berikan kepada mereka. Ini bermakna bukannya memuatkan JavaScript tambahan di dalam modul anda, anda boleh meninggalkannya kepada pengguna untuk memutuskan bagaimana mereka mahu menyambung ke dalamnya. Ini membolehkan komponen anda menjadi lebih banyak bukti masa depan.

Cuba sendiri!

Jika anda berminat untuk melihat versi Flexbox yang saya rujuk dalam demo ini dalam tindakan pada mesin anda sendiri, anda boleh melakukan perkara berikut dalam Chrome:

1. Pasang sambungan CORS Chrome dan hidupkannya. Ini adalah untuk membolehkan import HTML berfungsi dari tapak luaran.
2. Sama ada menyegarkan halaman ini atau buka mana -mana laman web dalam tab atau tetingkap baru supaya lanjutan menendang.
3. Dalam alat pemaju krom, tambahkan ini di dalam tag :

   <span><span>@media (max-width: 30em)</span> {
   </span>  <span><span>.form__item</span> {
   </span>    <span>float: none;
   </span>    <span>width: 100%;
   </span>  <span>}
   </span><span>}</span>

4. Akhirnya, tambah:

   <span><span>.form</span> {
   </span>  <span>display: flex;
   </span>  <span>flex-wrap: wrap;
   </span><span>}
   </span>
   <span><span>.form__item</span> {
   </span>  <span>align-items: center;   
   </span>  <span>display: flex;
   </span>  <span>flex: 1 0 320px;
   </span>  <span>flex-wrap: wrap;
   </span>  <span>max-width: 100%;
   </span><span>}       
   </span>
   <span>label {
   </span>  <span>flex: 1 0 90px;
   </span><span>}
   </span>
   <span>input {
   </span>  <span>flex: 1 0 230px;
   </span>  <span>width: 100%;
   </span><span>}</span>

   di suatu tempat di dalam dan anda harus melihat langganan saya membentuk secara automatik secara automatik. Nikmati!

Kesimpulan

Pendekatan di atas sebenarnya boleh digunakan untuk mana -mana pembangunan UI tetapi mereka meminjamkan diri dengan baik kepada komponen web yang responsif kerana sifat yang boleh diguna semula dan boleh dikongsi.

Jika anda belum memeriksa komponen web tetapi saya akan sangat menggalakkan anda untuk berbuat demikian. Walaupun spesifikasi penuh pada masa ini hanya tersedia secara asli di Chrome dan Opera, vendor penyemak imbas lain tidak jauh di belakang.

Jika anda menarik dalam mempelajari lebih lanjut mengenai reka bentuk web responsif, lihat buku baru kami, Jump Start Responsif Web Design, yang ditulis oleh Chris Ward.

Soalan Lazim (Soalan Lazim) pada Komponen Web Responsif

Apakah unsur-unsur utama komponen web responsif yang direka dengan baik? Ia sepatutnya mempunyai sistem grid bendalir yang membolehkan susun atur menyesuaikan mengikut saiz skrin. Ia juga harus mempunyai imej dan media yang fleksibel yang boleh mengubah saiz agar sesuai dengan skrin. Selain itu, ia sepatutnya mempunyai pertanyaan media yang membolehkan laman web menggunakan peraturan gaya CSS yang berbeza untuk peranti yang berbeza berdasarkan ciri -ciri seperti saiz skrin, resolusi, dan orientasi. Akhir sekali, ia harus cekap dari segi masa dan prestasi pemuatan.

Bagaimana pertanyaan kontena CSS menyumbang kepada komponen responsif? Digunakan berdasarkan saiz bekas induk dan bukannya viewport. Ini bermakna komponen boleh menyesuaikan susun aturnya berdasarkan saiznya sendiri, menjadikannya benar -benar responsif. Ini amat berguna untuk komponen yang digunakan semula dalam konteks yang berbeza dan perlu menyesuaikan diri dengan persekitaran mereka. mewujudkan komponen web responsif. Ia boleh digunakan untuk memanipulasi DOM, mengendalikan peristiwa, dan membuat kandungan dinamik. Ia juga boleh digunakan bersempena dengan pertanyaan media CSS untuk mewujudkan tingkah laku responsif yang lebih kompleks. Sebagai contoh, JavaScript boleh digunakan untuk memuat skrip atau kandungan yang berbeza berdasarkan saiz skrin atau keupayaan peranti.

Bagaimana saya dapat memastikan bahawa komponen web responsif saya boleh diakses? Pertimbangan utama apabila merancang komponen web responsif. Ini termasuk memastikan bahawa teks boleh dibaca di semua saiz skrin, bahawa unsur -unsur interaktif cukup besar untuk mudah ditoreh pada skrin sentuh, dan tapak tersebut dilayari dengan papan kekunci bagi mereka yang tidak dapat menggunakan tetikus. Di samping itu, anda harus menggunakan HTML semantik untuk memberikan konteks dan makna untuk menyaring pembaca, dan memastikan bahawa kontras warna mencukupi bagi mereka yang mengalami masalah visual. Mengatasi?

Beberapa cabaran biasa termasuk berurusan dengan saiz dan resolusi skrin yang berbeza, memastikan keserasian dengan pelayar dan peranti yang berbeza, dan mengoptimumkan prestasi. Ini dapat diatasi dengan menggunakan pendekatan pertama mudah alih, menguji pelbagai peranti, menggunakan pengesanan ciri untuk memastikan keserasian, dan mengoptimumkan imej dan skrip untuk prestasi.

Bagaimanakah komponen web responsif mempengaruhi SEO?

Komponen web responsif boleh memberi kesan positif terhadap SEO. Algoritma Google memihak kepada laman web yang mesra mudah alih, dan reka bentuk responsif adalah aspek utama ini. Di samping itu, mempunyai tapak responsif tunggal dan bukannya versi desktop dan mudah alih yang berasingan mengelakkan masalah dengan kandungan pendua, yang boleh memberi kesan negatif kepada SEO. adalah beberapa alat dan teknik untuk menguji respons komponen web. Ini termasuk mengubah saiz tetingkap penyemak imbas anda untuk melihat bagaimana susun atur menyesuaikan diri, menggunakan ciri-ciri emulasi peranti dalam alat pemaju pelayar, dan menggunakan alat dalam talian seperti ujian mesra mudah alih Google. 🎜> Masa depan komponen web responsif mungkin melibatkan teknik dan teknologi yang lebih maju. Ini termasuk perkara -perkara seperti pertanyaan kontena, yang sedang dibangunkan, serta penggunaan AI dan pembelajaran mesin untuk menyesuaikan susun atur berdasarkan tingkah laku pengguna dan keutamaan. ? Ini termasuk tutorial dalam talian dan kursus, buku, dan forum komuniti. Di samping itu, bereksperimen dengan mewujudkan komponen responsif anda sendiri dan mengkaji kod orang lain boleh menjadi cara yang baik untuk belajar. banyak rangka kerja dan perpustakaan yang boleh membantu anda membuat komponen web responsif. Ini termasuk bootstrap, yayasan, dan reaksi, antara lain. Alat ini menyediakan komponen dan susun atur yang telah direka sebelum responsif, menjimatkan masa dan usaha anda. Walau bagaimanapun, masih penting untuk memahami prinsip asas reka bentuk responsif untuk menggunakan alat ini dengan berkesan.

Atas ialah kandungan terperinci Bagaimana anda boleh menggunakan komponen web responsif hari ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!