Kā izmantot multivides vaicājumus HTML un CSS, lai izveidotu atsaucīgas vietnes

Ja vēlaties attīstīt vietnes / tīmekļa lietojumprogrammas, tad jūsu panākumiem ir svarīgi zināt, kā izveidot atsaucīgu dizainu.

Agrāk vietņu izveide, kas labi pielāgojās dažādiem ekrāna izmēriem, bija greznība, kas vietņu īpašniekiem bija jāpieprasa no izstrādātāja. Tomēr viedtālruņu un planšetdatoru izmantošanas pieaugums ir padarījis atsaucīgu dizainu par nepieciešamību programmatūras izstrādes pasaulē.

Multivides vaicājumu izmantošana ir labākais veids, kā nodrošināt, lai jūsu vietne / tīmekļa lietotne katrā ierīcē tiktu parādīta tieši tā, kā vēlaties.

Izpratne par atsaucīgu dizainu

Īsumā, atsaucīgs dizains attiecas uz HTML / CSS izmantošanu, lai izveidotu vietnes / tīmekļa lietotnes izkārtojumu, kas pielāgojas dažādiem ekrāna izmēriem. HTML / CSS ir daži dažādi veidi, kā panākt atsaucību vietnes dizainā:

• Rem un em vienību izmantošana pikseļu vietā (px)
• Katras tīmekļa lapas skata / mēroga iestatīšana
• Izmantojot multivides vaicājumus

Multivides vaicājums ir CSS iezīme, kas tika izlaista CSS3 versijā. Ieviešot šo jauno funkciju, CSS lietotāji iegūst iespēju pielāgot tīmekļa lapas attēlojumu, pamatojoties uz ierīces / ekrāna augstumu, platumu un orientāciju (ainavas vai portreta režīmā).

Lasīt vairāk: Essential CSS3 Properties apkrāptu lapa

Multivides vaicājumi nodrošina sistēmu, lai vienu reizi izveidotu kodu un vairākas reizes to izmantotu visā programmā. Tas, iespējams, nešķiet tik noderīgi, ja izveidojat vietni, kurā ir tikai trīs tīmekļa lapas, bet ja jūs strādājat uzņēmumā ar simtiem dažādu tīmekļa lapu - tas izrādīsies milzīgs laiks taupītājs.

Izmantojot multivides vaicājumus, jums jāņem vērā vairākas atšķirīgas lietas: struktūra, izvietojums, diapazons un saistīšana.

Tikai @media / nav multivides tips un (izteiksme) {
/ * CSS kods * /
}

Multivides vaicājuma vispārējā struktūra ietver:

• Atslēgvārds @media
• Ne / vienīgais atslēgvārds
• Multivides tips (kas var būt ekrāns, druka vai runa)
• Atslēgvārds “un”
• Iekavās ietverta unikāla izteiksme
• CSS kods, kas ievietots atvērtu un aizvērtu cirtainu lencīšu pārī.

Saistīts: CSS izmantošana dokumentu formatēšanai drukāšanai

Tikai @media ekrāns un (maksimālais platums: 450 pikseļi) {
ķermenis {
fona krāsa: zila;
}
}

Iepriekš minētajā piemērā CSS stils (īpaši zila fona krāsa) tiek piemērots tikai ierīču ekrāniem, kuru platums ir 450 pikseļi un mazāk, tātad pamatā viedtālruņiem. Atslēgvārdu “vienīgais” var aizstāt ar atslēgvārdu “nē”, un tad CSS stils iepriekšminētajā multivides vaicājumā attieksies tikai uz druku un runu.

Tomēr pēc noklusējuma vispārēja multivides vaicājumu deklarācija attiecas uz visiem trim multivides tipiem, tāpēc nav nepieciešams norādīt datu nesēja tipu, ja vien mērķis nav izslēgt vienu vai vairākus no tiem.

/ * viedtālruņu dizains * /
@media (maks. platums: 450 pikseļi) {
ķermenis {
fona krāsa: zila;
}
}

Multivides vaicājums ir CSS īpašums; tāpēc to var izmantot tikai stila valodā. Ir trīs dažādi veidi, kā CSS iekļaut savā kodā; tomēr tikai divas no šīm metodēm nodrošina praktisku veidu, kā savās programmās iekļaut multivides vaicājumus - iekšējo vai ārējo CSS.

Iekšējā metode ietver

Ārējā metode ietver multivides vaicājuma izveidošanu ārējā CSS failā un saistīšanu ar HTML failu, izmantojot tagu.

Neatkarīgi no tā, vai multivides vaicājumi tiek izmantoti, izmantojot iekšējo vai ārējo CSS, ir viens no galvenajiem stila valodas aspektiem, kas var negatīvi ietekmēt multivides vaicājuma darbību. CSS ir prioritātes kārtības noteikums. Lietojot a CSS atlasītājsvai šajā gadījumā multivides vaicājums, katrs jaunais multivides vaicājums, kas pievienots CSS failam, ignorē (vai tam ir virsraksts) iepriekšējo.

Noklusējuma multivides vaicājuma kods, kas mums ir iepriekš, ir paredzēts viedtālruņiem (450 pikseļu platumā un zemāk), tādēļ, ja vēlaties iestatīt a atšķirīgs planšetdatoru fons, jūs domājat, ka vienkārši varētu pievienot šo kodu jau esošajam CSS failam.

/ * planšetdatoru dizains * /
@media (max-width: 800px) {
ķermenis {
fona krāsa: sarkana;
}
}

Vienīgā problēma ir tā, ka prioritātes secības dēļ planšetdatoriem būtu sarkana fona krāsa un viedtālruņiem tagad arī sarkana fona krāsa, jo 450 pikseļi un mazāk ir mazāk nekā 800 pikseļi.

Viens no veidiem, kā atrisināt šo mazo problēmu, būtu pievienot multivides vaicājumu planšetdatoriem pirms viedtālruņiem; pēdējais ignorētu pirmo, un tagad jums būtu viedtālruņi ar zilu fona krāsu un planšetdatori ar sarkanu fona krāsu.

Tomēr ir labāks veids, kā panākt atsevišķu viedtālruņu un planšetdatoru stilu, neuztraucoties par prioritātes kārtību. Šī ir multivides vaicājumu iezīme, kas pazīstama kā diapazona specifikācija, kur izstrādātājs var izveidot multivides vaicājumu ar maksimālo un minimālo platumu (diapazonu).

/ * planšetdatoru dizains * /
@media (max-width: 800px) un (min-width: 451) {
ķermenis {
fona krāsa: sarkana;
}
}

Izmantojot iepriekš minēto piemēru, multivides vaicājumu ievietošana stila lapā kļūst nebūtiska, jo planšetdatoru un viedtālruņu dizains ir paredzēts divām atsevišķām platuma kolekcijām.

Ja nevēlaties iegult multivides vaicājumus savā CSS kodā, varat izmantot citu metodi. Šī metode ietver multivides vaicājumu izmantošanu HTML faila tagu, tāpēc tā vietā, lai būtu viena masīva stila lapa, kurā iekļautas stila preferences vietnei viedtālruņi, planšetdatori un datori - jūs varētu izmantot trīs atsevišķus CSS failus un izveidot multivides vaicājumus vietnē tagu.

The tags ir HTML elements, ko izmanto CSS stila importēšanai no ārējas stila lapas. Šim tagam ir multivides rekvizīts, kas darbojas tāpat kā multivides vaicājums CSS.

 galvenā stila lapa 

 planšetdatora stila lapa 
href = "tablet.css">
 viedtālruņa stila lapa 

Iepriekš minētais kods jāievieto

HTML faila tagu. Tagad viss, kas jums jādara, ir izveidot trīs atsevišķus CSS failus ar failu nosaukumiem main.css, tablet.css un smartphone.css - pēc tam izveidot konkrētu dizainu, kādu vēlaties katrai ierīcei.

Stils galvenajā failā tiks piemērots visiem ekrāniem, kuru platums ir lielāks par 800 pikseļiem, un planšetdatora failā esošais stils visiem ekrāniem, kuru platums ir no 450 līdz 801 pikseļiem, un viedtālruņa faila stils tiks piemērots visiem ekrāniem zemāk 451 pikseļi.

Ja jūs to izdarījāt šī raksta beigās, jūs varējāt uzzināt, kas ir atsaucīgs dizains un kāpēc tas ir noderīgs. Tagad jūs varat identificēt un izmantot multivides vaicājumus CSS un HTML failos. Turklāt jūs iepazīstinājāt ar CSS prioritātes kārtību un redzējāt, kā tas varētu ietekmēt jūsu multivides vaicājumu darbību.

Attēlu kredīts: negatīva telpa /Peksels

Kā iestatīt fona attēlu CSS

CSS ir spēcīgs rīks tīmekļa lapu veidošanai. Uzzinot, kā ievietot fona attēlu, jūs iemācīsit daudz CSS pamatu.

Lasiet Tālāk

Par autoru