CSS-i Konteineripäringu Ühikud: Juhend Elemendi-suhteliseks Suuruse Määramiseks Kohanduvas Disainis

Kohanduv veebidisain on aastatega märkimisväärselt arenenud. Kuigi vaateakna suurusel põhinevad meediapäringud on endiselt nurgakivi, pakuvad CSS-i konteineripäringud detailsemat ja komponendikesksemat lähenemist. Konteineripäringud võimaldavad stiile rakendada sisaldava elemendi suuruse, mitte kogu vaateakna põhjal. Konteineripäringute raames viivad konteineripäringu ühikud selle detailsuse veelgi kaugemale, võimaldades teil elemente suurustada suhtes nende konteineriga.

Mis on konteineripäringu ühikud?

Konteineripäringu ühikud (CQ-ühikud) on CSS-i ühikute komplekt, mis esindavad protsenti konteinerelemendi suurusest. Need ühikud pakuvad võimsat viisi luua komponente, mis kohanduvad sujuvalt erinevate konteinerite suurustega, sõltumata kogu vaateakna suurusest. Mõelge navigeerimismenüüle, mis kohandab oma paigutust vastavalt külgribal saadaolevale ruumile, või tootekardile, mis kohandab oma fondi suurust ja pildi suurust vastavalt oma konteineri laiusele võrgustikupaigutuses. CQ-ühikud muudavad selliste kohanduvate disainide rakendamise oluliselt lihtsamaks.

Erinevalt vaateakna ühikutest (vw, vh, vmin, vmax), mis on suhtelised vaateaknaga, on konteineripäringu ühikud suhtelised päringukonteineriga. See tähendab, et sama komponent võib teie rakenduse eri osades renderdada erinevalt, kohandudes iga konteineri spetsiifiliste piirangutega.

Põhilised konteineripäringu ühikud

On kuus peamist konteineripäringu ühikut, mis peegeldavad vaateakna ühikute käitumist:

• cqw: 1% päringukonteineri laiusest.
• cqh: 1% päringukonteineri kõrgusest.
• cqi: 1% päringukonteineri reasisest suurusest. Reasisene suurus vastab laiusele horisontaalsetes kirjaviisides (nagu inglise keel) ja kõrgusele vertikaalsetes kirjaviisides (nagu traditsiooniline mongoolia kiri).
• cqb: 1% päringukonteineri ploki suurusest. Ploki suurus vastab kõrgusele horisontaalsetes kirjaviisides ja laiusele vertikaalsetes kirjaviisides.
• cqmin: 1% päringukonteineri väiksemast mõõtmest (kas reasisene suurus või ploki suurus).
• cqmax: 1% päringukonteineri suuremast mõõtmest (kas reasisene suurus või ploki suurus).

Oluline on mõista erinevust cqw/cqh ja cqi/cqb vahel, eriti rahvusvahelistamise (i18n) ja lokaliseerimisega (l10n) töötades, sest kirjaviisid võivad mõjutada füüsilisi mõõtmeid, millele need ühikud viitavad. cqi ja cqb on loodud loogilisemaks, austades dokumendi või konteineri kirjaviisi.

Konteineripäringute seadistamine

Enne konteineripäringu ühikute kasutamist peate määrama elemendi päringukonteineriks. Seda tehakse CSS-i omaduse container-type abil.

Omadusel container-type on kaks peamist väärtust:

• size: Konteiner loob päringukonteineri ja arvutab konteineri suuruse reasisese ja ploki mõõtmete põhjal. See on kõige levinum väärtus CQ-ühikute kasutamisel.
• inline-size: Konteiner loob päringukonteineri, kuid päringute jaoks kasutatakse ainult reasisest suurust. Kasulik, kui teid huvitab ainult laius horisontaalsetes kirjaviisides.

Saate kasutada ka lühendomadust container, et seadistada nii container-type kui ka container-name (mis võimaldab teil sihtida konkreetseid konteinereid):

            .container {
  container: my-container size;
}

            

              
                Copy
              
            
          

Selles näites oleme loonud päringukonteineri nimega "my-container". Saate seejärel sihtida seda konteinerit oma CSS-is, kasutades @container at-reeglit:

            @container my-container (min-width: 300px) {
  /* Styles to apply when the container's width is at least 300px */
}

            

              
                Copy
              
            
          

Konteineripäringu ühikute praktilised näited

Uurime mõningaid praktilisi stsenaariume, kus konteineripäringu ühikud võivad teie kohanduva disaini töövoogu märkimisväärselt parandada.

Näide 1: Kohanduv tootekart

Kujutage ette tootekarti, mis peab oma paigutust kohandama vastavalt saadaolevale ruumile. Soovime, et fondi suurus ja pildi suurus skaleeruksid proportsionaalselt konteineri laiusega.

            .product-card {
  container-type: size;
  width: 100%;
  border: 1px solid #ccc;
  padding: 16px;
}

.product-card img {
  width: 40cqw; /* 40% of the container's width */
  height: auto;
}

.product-card h2 {
  font-size: 5cqw; /* 5% of the container's width */
  margin-bottom: 8px;
}

.product-card p {
  font-size: 3cqw; /* 3% of the container's width */
}

            

              
                Copy
              
            
          

Selles näites on pildi laius, pealkirja fondi suurus ja lõigu fondi suurus kõik määratletud cqw abil. Kui tootekardi konteineri suurus muutub, skaleeruvad need elemendid proportsionaalselt, säilitades ühtlase visuaalse ilme.

Globaalne asjakohasus: See näide on universaalselt rakendatav, kuna tootekardid on levinud element e-kaubanduse platvormidel üle maailma. Olenemata sellest, kas müüte kaupu Põhja-Ameerikas, Euroopas, Aasias või Aafrikas, on tootekartide kohanduvaks tegemine ülioluline.

Näide 2: Dünaamiline navigeerimismenüü

Mõelge navigeerimismenüüle, mis peab kohandama oma paigutust sõltuvalt sellest, kas see asub põhipäises või väiksemas külgribas. Saame kasutada konteineripäringuid, et lülituda horisontaalse ja vertikaalse paigutuse vahel.

            .navigation {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap if needed */
  gap: 10px;
}

.navigation a {
  padding: 8px 12px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  white-space: nowrap; /* Prevent text from wrapping */
}

@container (max-width: 400px) {
  .navigation {
    flex-direction: column;
    align-items: stretch;
  }

  .navigation a {
    display: block;
    text-align: center;
  }
}

            

              
                Copy
              
            
          

Sel juhul kasutame konteineripäringut max-width tingimusega. Kui konteineri laius on 400 pikslit või vähem, lülitub navigeerimismenüü vertikaalsele paigutusele. Pange tähele, et meid huvitab ainult konteineri reasisene suurus, seega `container-type: inline-size;`

Globaalne asjakohasus: Navigeerimismenüüd on veebisaidi kasutatavuse fundamentaalne osa. Vajadus kohanduva navigeerimise järele on universaalne, olenemata sihtrühmast või geograafilisest asukohast.

Näide 3: Andmetabeli kohandamine

Andmetabelid on kurikuulsad oma raskesti kohandatavaks tegemise poolest. Konteineripäringud koos CQ-ühikutega aitavad meil luua paindlikumaid tabeleid, mis kohanduvad väiksemate konteineritega.

            .data-table-container {
  container-type: size;
  overflow-x: auto; /* Enable horizontal scrolling on small screens */
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  border: 1px solid #ccc;
  padding: 8px;
  font-size: 3cqw; /* Adapt font size to container width */
  white-space: nowrap; /* Prevent line breaks */
}

@container (max-width: 600px) {
  .data-table th, .data-table td {
    font-size: 4cqw; /* Slightly larger font size on smaller containers */
  }
}

            

              
                Copy
              
            
          

Siin kasutame cqw-d, et skaleerida tabeli lahtrites olevat fondi suurust. Samuti lubame konteineril horisontaalselt kerida, kasutades `overflow-x: auto`, et tabel jääks väiksematel ekraanidel kasutatavaks. Konteineripäring kohandab fondi suurust veidi, et tagada veelgi parem loetavus kitsastes konteinerites.

Globaalne asjakohasus: Andmetabeleid kasutatakse laialdaselt erinevates tööstusharudes üle maailma, alates rahandusest ja tervishoiust kuni hariduse ja logistikani. Kohanduv andmetabel tagab, et oluline teave on kättesaadav erinevates seadmetes ja ekraanisuurustes, mis on globaalsele publikule ülioluline.

Näide 4: cqmin ja cqmax kasutamine ühtlaste proportsioonide jaoks

Oletame, et soovite luua konteinerisse ruudukujulise elemendi, mille külje pikkus on alati protsent konteineri väiksemast mõõtmest.

            .square-container {
  container-type: size;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.square {
  width: 30cqmin; /* 30% of the smaller dimension */
  height: 30cqmin; /* 30% of the smaller dimension */
  background-color: lightblue;
}

            

              
                Copy
              
            
          

Selles näites on .square element alati ruut ja selle külje pikkus on 30% .square-container'i väiksemast mõõtmest (antud juhul kõrgusest). Kui konteineri laius oleks väiksem kui selle kõrgus, põhineks ruudu külje pikkus hoopis laiusel. See on eriti kasulik kuvasuhte säilitamiseks kohanduval viisil.

Globaalne asjakohasus: Kuvasuhte säilitamine on oluline mitmesuguste visuaalsete elementide, näiteks logode, profiilipiltide või ikoonide puhul. cqmin'i kasutamine tagab järjepidevuse erinevates konteinerites, mis on oluline ühtse brändikogemuse loomiseks kasutajatele kogu maailmas.

Brauseritugi ja polüfillid

2023. aasta lõpu seisuga on brauseritugi konteineripäringutele ja konteineripäringu ühikutele suurepärane kaasaegsetes brauserites nagu Chrome, Firefox, Safari ja Edge. Kui teil on aga vaja toetada vanemaid brausereid, võiksite kaaluda polüfilli kasutamist. Saadaval on mitu polüfilli, mis võivad tuua konteineripäringu funktsionaalsuse vanematesse brauseritesse, kuigi jõudlus võib varieeruda.

Konteineripäringu ühikute kasutamise eelised

• Parem komponentide taaskasutatavus: Komponendid muutuvad iseseisvamaks ja kohandatavamaks, kuna nende stiilid on seotud nende konteineriga, mitte kogu vaateaknaga.
• Detailsem kontroll: Konteineripäringud pakuvad täpsemat kontrolli stiilimise üle, võimaldades teil sihtida konkreetseid komponente nende individuaalse konteksti alusel.
• Lihtsustatud kohanduv disain: CQ-ühikud lihtsustavad keerukaid kohanduvaid paigutusi, võimaldades teil määratleda stiile, mis skaleeruvad proportsionaalselt konteineri suurusega.
• Parem koodi hooldatavus: Komponendipõhine stiilimine muudab teie CSS-i organiseeritumaks ja lihtsamini hooldatavaks.
• Parem jõudlus: Mõnel juhul võivad konteineripäringud viia parema jõudluseni võrreldes keerukate meediapäringute seadistustega, kuna brauser peab päringuid hindama ainult konkreetse konteineri, mitte kogu vaateakna jaoks.

Väljakutsed ja kaalutlused

• Brauseritugi: Kuigi brauseritugi on hea, testige oma disaine alati põhjalikult erinevates brauserites ja seadmetes, eriti kui peate toetama vanemaid versioone.
• Jõudlus: Konteineripäringute liigne kasutamine või liiga keerukate päringute loomine võib potentsiaalselt mõjutada jõudlust. Profiilige oma koodi, et tuvastada jõudluse kitsaskohad.
• Keerukus: Konteineripäringud võivad lisada teie CSS-ile keerukust, eriti pesastatud konteineritega tegelemisel. Korralik planeerimine ja organiseerimine on hädavajalikud.
• Kirjaviiside mõistmine: Pidage meeles erinevust cqw/cqh ja cqi/cqb vahel, eriti kui tegelete mitmekeelsete veebisaitidega, mis kasutavad erinevaid kirjaviise.

Parimad tavad konteineripäringu ühikute kasutamiseks

• Alustage komponendipõhise lähenemisega: Kujundage oma kasutajaliides korduvkasutatavate komponentide kogumina.
• Kasutage konteineripäringuid säästlikult: Ärge kasutage konteineripäringuid üleliia, kui piisab lihtsatest meediapäringutest.
• Hoidke päringud fokusseerituna: Hoidke oma konteineripäringud spetsiifilised ja sihipärased.
• Testige põhjalikult: Testige oma disaine erinevates brauserites, seadmetes ja konteinerisuurustes.
• Dokumenteerige oma kood: Dokumenteerige selgelt oma konteineripäringud ja nende taga olevad põhjendused.
• Arvestage ligipääsetavusega: Veenduge, et teie kohanduvad disainid on ligipääsetavad puuetega kasutajatele, olenemata konteineri suurusest.

Kokkuvõte

CSS-i konteineripäringu ühikud pakuvad võimsat ja paindlikku viisi tõeliselt kohanduvate disainide loomiseks. Võimaldades teil stiilida elemente suhtes nende konteineritega, aitavad CQ-ühikud teil ehitada taaskasutatavamaid, hooldatavamaid ja kohandatavamaid komponente. Kuigi on mõningaid väljakutseid, mida arvesse võtta, kaaluvad konteineripäringute ja CQ-ühikute kasutamise eelised kaugelt üle puudused, eriti keerukate ja komponendipõhiste veebirakenduste puhul. Kuna brauseritugi jätkuvalt paraneb, on konteineripäringud valmis saama oluliseks tööriistaks esiotsa arendajatele kogu maailmas. Võtke omaks elemendi-suhtelise suuruse määramise võimsus ja avage oma projektide jaoks uus kohanduva disaini võimekuse tase.