CSS-leveysominaisuus: täydellinen opas verkkosivustojen mitoitukseen

Kun aloitat verkkosivujen suunnittelun, yksi ensimmäisistä kysymyksistä on, miten hallita elementtien koko- ja leveyskäyttäytyminenSiinä kohtaa kuuluisa kiinteistö astuu kuvaan. width CSS:stä, kollegoidensa seurassa height, max-width, min-width ja yritys. Näiden ominaisuuksien hallinta tekee eron jäykän suunnittelun ja joustavan, ammattimaisen välillä.

Vaikka saattaa vaikuttaa siltä, ​​että kyse on vain jonkin asian kertomisesta "se on näin paljon leveä ja näin paljon korkea", on itse asiassa monia vivahteita: miten elementit reagoivat sisäiseen sisältöönMitä tapahtuu, kun tilaa ei ole tarpeeksi? Miten kuvien kokoa muutetaan? Mitkä ovat vähimmäis- ja enimmäiskokorajat? Ja miten säilytät kuvasuhteen vääristämättä mitään? Tarkastelemme asiaa rauhallisesti selkeiden esimerkkien ja helposti ymmärrettävän kielen avulla, jotta voit soveltaa kaikkea tätä projekteihisi ilman päänvaivaa.

Mikä on CSS:n width-ominaisuus ja miten se toimii?

Omaisuus width Se palvelee määrittelemään elementin laatikon leveysjoko a divTämä voi olla kuva, kappale tai mikä tahansa muu elementti, joka hyväksyy mitat. Tämä arvo voidaan ilmaista eri yksiköissä (kuten pikseleinä tai prosentteina), ja se määrittää, kuinka paljon vaakasuoraa tilaa se vie pääsäiliössään.

Jos eksplisiittistä leveyttä ei ole määritetty, lohkoelementti on yleensä laajenee automaattisesti täyttämään koko käytettävissä olevan leveyden sen säilöstä. Tämä on tyypillistä toimintaa elementeille, kuten <div> o <p>jotka oletuksena täyttävät koko rivin, ellei niiden leveyttä ole rajoitettu CSS:llä.

Sitä vastoin, kun annat arvon jollekin width, olet perustamassa tietty tai suhteellinen leveys pääobjektiin nähdenEsimerkiksi, jos kirjoitat:

div { width: 300px; }

Laatikko on 300 pikseliä leveä, edellyttäen että säilössä on tarpeeksi tilaa. Jos käytät prosenttiosuutta, kuten width: 50%;elementti ottaa puolet säilöelementin leveydestämukautuu, kun säiliön koko muuttuu.

On tärkeää pitää mielessä, että kun pakotat kiinteän leveyden, kerrot selaimelle, että laatikon on noudatettava näitä mittojavaikka sisäinen sisältö olisi suurempi. Jos sisältö ei mahdu, muut ominaisuudet tulevat esiin, kuten overflow päättääkseen, mitä tuolle ylivuotolle tapahtuu.

Leveyden, korkeuden ja automaattisen arvon väliset erot

Además de widthCSS:llä on ominaisuus height hallita elementin korkeusMolemmat ominaisuudet hyväksyvät arvot absoluuttisina (px) tai suhteellisina (%, em, rem jne.) yksiköinä, mutta niiden oletustoiminta ei ole täsmälleen sama.

Kun elementille ei ole osoitettu eikä width ni heightSelain käyttää implisiittistä arvoa auto molemmille kiinteistöilleTämä tarkoittaa, että leveys ja korkeus lasketaan automaattisesti elementin tyypin ja sisällön perusteella. Selain yrittää valita "loogisen" koon asiakirjan kulun mukaan.

Käytännössä käytä width: auto; anna selaimen Säädä leveyttä luonnollisesti kontekstin mukaan.Vaikka height: auto; Tämä aiheuttaa korkeuden kasvun sisällön mukauttamiseksi. Normaalisti näitä arvoja ei tarvitse määrittää, koska ne ovat oletusarvoisia.

On muistettava, että elementin tyyppi (lohko tai rivielementti) Tämä vaikuttaa siihen, miten näitä mittoja tulkitaan. Esimerkiksi inline-elementti ei käyttäydy kuin täydellinen laatikko, kun se liitetään width y heightja monissa tapauksissa on tarpeen muuttaa niitä display a inline-block o block jotta se reagoi odotetusti.

Jos päätät asettaa tietyt leveys- ja korkeusmitat, asetat jäykän "kehyksen" Kaikki nämä mitat ylittävä sisältö voi aiheuttaa visuaalista ylikuormitusta, päällekkäisyyksiä tai vierityspalkkeja riippuen siitä, miten loput ominaisuudet määritetään.

Mitä tapahtuu, kun sisältö ei sovi: ylivuoto ja läikkymiset

Kun määrität kiinteä leveys ja korkeus Kun säädät elementin kokoa, on mahdollista, että sisäinen sisältö on suurempi kuin varaamasi tila. Tämä ristiriita voi aiheuttaa tyypillisen vaikutuksen, jossa teksti "täyttää" ruudun, näkyviin tulee odottamattomia vierityspalkkeja tai jopa osa sisällöstä piiloutuu.

Tämän toiminnan hallitsemiseksi käytetään ominaisuutta overflow, mikä osoittaa Miten selaimen tulisi reagoida, kun sisältö ylittää näkyvän alueen? elementin. Sen yleisimmät arvot ovat:

• näkyvä: on oletusarvo; sisältö, joka ei mahdu ruutuun, jatkaa sen "ylivuodon" ja voi mennä päällekkäin muiden kohteiden kanssa.
• kätkettyAsetetun koon ylittävä sisältö rajataan eikä näy; vierityspalkkeja ei näytetä.
• selaaVierityspalkit (vaakasuorat, pystysuorat tai molemmat) näkyvät aina, vaikka sisältö mahtuisi näkymään ilman ylivuotoa.
• autoVierityspalkit näkyvät vain, kun sisältö ylittää laatikon koon.

Jos käytät overflow: visible; ja olet määritellyt a laatikon kiinteä kokoYlimääräinen sisältö piirretään seuraavan päälle, mikä usein johtaa epäviehättävään ulkonäköön. Siksi rajoitetun korkeuden tai leveyden omaavien laatikoiden kanssa työskenneltäessä on yleistä käyttää... hidden o auto sisältämään kyseistä sisältöä.

Lisäksi on mielenkiintoinen käyttötarkoitus overflow: auto; liittyvät kelluvat elementitTämä kokoonpano voi pakottaa säilön ottamaan huomioon sen sisällä kelluvien elementtien korkeuden, estäen sen korkeuden romahtamisen ja parantaen pääelementin lopullisen koon laskemista.

Min-width, max-width, min-height ja max-height: kokorajoitukset

Sen sijaan, että merkitsisit täysin jäykän koon width o heightSe on paljon joustavampi määrittää vähimmäis- ja enimmäisrajat jotka antavat suunnittelun hengittää. Sitä varten ominaisuudet ovat olemassa. min-width, max-width, min-height y max-height, jotka toimivat pysähdyksinä.

Ominaisuudet min-width y min-height show elementin pienin mahdollinen kokoNe ilmaistaan ​​samalla tavalla kuin width y heightnumeerisilla arvoilla ja yksiköillä (px, % jne.) ja jos käytetään prosenttiosuuksia, ne lasketaan suhteessa pääsäiliöön, aivan kuten normaalin leveyden tapauksessa.

Lisäksi, max-width y max-height Marcan leveyden tai korkeuden suurin sallittu kokoElementin kokoa voidaan pienentää, jos käytettävissä oleva tila on rajallinen, mutta se ei koskaan ylitä tyylitiedostossa määrittämääsi enimmäiskokoa.

Tyypillinen esimerkki käytöstä olisi:


div {
width: 100%;
min-width: 300px;
max-width: 800px;
height: 200px;
background: red;
}


Tällä kokoonpanolla elementti yrittää käytä koko käytettävissä oleva leveys kiitos width: 100%;Mutta se ei koskaan ole kapeampi kuin 300 pikseliä eikä leveämpi kuin 800 pikseliä. Kun muutat selainikkunan kokoa, näet, kuinka laatikko mukautuu tasaisesti näiden rajojen sisällä.

oletusarvoisesti min-width y min-height ne ovat arvoltaan 0Eli niille ei ole asetettu vähimmäiskokovaatimuksia, kun taas max-width y max-height Niillä on oletusarvo noneTämä tarkoittaa, että jos et muuta niitä, ei ole ylärajaa ja elementti voi kasvaa niin paljon kuin sen konteksti sallii.

Käytännön eroja leveyden, maksimileveyden ja minimileveyden välillä

Nykyaikaisia ​​​​asetteluja suunniteltaessa on tärkeää ymmärtää hyvin milloin käyttää width ja milloin lyödä vetoa max-width o min-widthKoska se ratkaisee, onko suunnittelusi responsiivinen vai todellinen päänsärky.

Omaisuus width aseta tarkka kokoElementin leveys pysyy samana riippumatta siitä, mitä tapahtuu, ellet myöhemmin korvaa sitä mediakyselyillä. Jos käytät jotain seuraavanlaista: width: 1000px; Jos vierailet sivulla mobiililaitteella, sivu todennäköisesti vieritetään vaakasuunnassa ja ulkoasu on täysin rikki.

Sen sijaan, max-width perustaa a joustava yläraja. Esimerkiksi:

.contenedor { max-width: 600px; }

Tämän säännön mukaan elementin leveys ei koskaan ylitä 600 pikseliä, mutta jos säilö tai näyttö on kapeampi, elementti kutistuu ongelmitta estäen ylivuodon. Tämä on ihanteellista teksti- tai pääsisältölohkoille, joissa haluat miellyttävän maksimaalisen luettavuuden ja silti mukautua pienemmille näytöille.

Omalta min-width Sen avulla voit taata, että elementti älä tee siitä liian kapeaaEsimerkiksi sarakkeita sisältävissä asetteluissa voit estää kortin tai tietolohkon litistymisen hyvin pienillä näytöillä ja säilyttää siten vähimmäisluettavan leveyden.

Max-width-ominaisuuden käytännön käyttö responsiivisessa suunnittelussa

Koko tämän ominaisuusjoukon sisällä, max-width Se on luultavasti yksi hyödyllisimmistä kun kyse on responsiivisesta suunnittelusta ja asetteluista, joiden on mukauduttava useisiin eri näyttökokoihin.

Hyvin yleinen ensimmäinen käyttötarkoitus on levittää sitä sivun pääkonttorit. Esimerkiksi:


.main-content {
max-width: 1200px;
margin: 0 auto;
}


Tällä tavoin sisältö ei laajene loputtomiin jättimäisillä näytöillä, mikä parantaisi luettavuutta (etenkin pitkissä teksteissä). Yhdistämällä sen margin: 0 auto;Keskität lohkon tyylikkäästi näyttöön jättäen tasapainoiset sivumarginaalit.

Toinen hyvin tyypillinen skenaario on se, että kuvat, joiden on skaalauduttava tasaisestiLähes pakollinen sääntö missä tahansa modernissa CSS:ssä on:


img {
max-width: 100%;
height: auto;
}


Tämä varmistaa, että kuva ei koskaan ole leveämpi kuin sen pakkaus (estäen sitä rikkomasta suunnittelua) ja kiitos height: auto;Alkuperäiset mittasuhteet säilyvät vääristymättöminä. Se on perustavanlaatuinen perusta optimoi kuvia verkkoa varten ilman hakkerointeja.

Asetteluissa, jotka on luotu käyttämällä flexbox tai CSS Grid, max-width Se toimii myös "pysäyttimenä" estäen tiettyjen elementtien, kuten korttien tai moduulien, venymisen liian pitkälle suurilla näytöillä. Esimerkiksi:


.tarjeta {
flex: 1;
max-width: 400px;
}


Näin varmistat, että kortit jakavat käytettävissä olevan tilan, mutta eivät koskaan ylitä kohtuullista leveyttä, säilyttäen tasapainoisen estetiikan.

Img-tagin width- ja height-attribuutit ja niiden suhde CSS:ään

CSS:n kautta tapahtuvan koonhallinnan lisäksi HTML-kuvilla on myös attribuutit width y height itse etiketissä <img>Nämä ominaisuudet osoittavat kuvan sivulla näkyvän leveyden ja korkeuden, yleensä oletusarvoisesti pikseleinä.

Jos et määritä mitään näistä ominaisuuksista, selain näyttää kuvan, jossa on sen alkuperäiset mitatJos määrität ne, selain skaalaa kuvan näihin arvoihin näyttöä varten, mutta muokkaamatta varsinaista levyllä olevaa tiedostoa, vain näytöllä näkyvää esitystä.

Kun vain toinen kahdesta attribuutista on määritetty, joko width o height, Navigator säädä toista mittaa suhteellisestiKuvan kuvasuhteen säilyttäminen ja vääristymien estäminen. Jos määrität molemmat, kuva pakotetaan täsmälleen asettamaasi kokoon, mikä voi vääristää sitä, jos se ei noudata alkuperäisiä mittasuhteita.

Hyvä yleinen käytäntö on Älä suurenna kuvaa liikaa sen todellisesta koostakoska se menettää terävyyttä ja muuttuu epätarkaksi. Näissä tapauksissa on parempi aloittaa riittävän resoluution kuvalla tai käyttää Vektorigrafiikka, kuten SVG, jotka mahdollistavat skaalauksen laadun heikkenemättä.

On vielä yksi tärkeä yksityiskohta: jos et laita width y height Etiketissä <img>Selain ei tiedä etukäteen, kuinka paljon tilaa varata kyseiselle kuvalle sivun kulussa, mikä voi aiheuttaa sisällön hypyt kun kuvan lataus on valmis. Tämä visuaalinen tehoste voi olla ärsyttävä, etenkin suurten kuvien kanssa.

Myös vanhempia HTML-versioita käytettiin prosenttiosuudet leveys- ja korkeusattribuuteissa kuvasta, kuten width="100%"jotta kuva sopisi täyteen käytettävissä olevaan leveyteen. Nykyään CSS:n ja elementtien, kuten <picture>Tämä tekniikka on vanhentunut, vaikka selaimet tukevat sitä edelleen.

Edistynyt kuvakoon hallinta ja maksimileveys

Hyvin mielenkiintoinen yhdistelmä syntyy, kun niitä käytetään prosenttiosuudet attribuutissa width kuvan ja samalla CSS-sääntöjen estääkseen sen skaalautumisen alkuperäistä kokoaan suuremmaksi. Esimerkiksi:

<img src="graficos/en_rio_grande_800.jpg" style="max-width: 100%; height: auto;">

Tämä tarkoittaa, että kuvan ei tulisi koskaan olla leveämpi kuin 100 % sen säiliöstä ja että korkeus säätyy suhteellisesti. Tämä estää kuvan visuaalisen ylipursuamisen ja estää sitä kasvamasta luonnollisen kokonsa yli, jos säiliö on erittäin suuri.

Monissa projekteissa, varsinkin kun kuvia on paljon ja ne ovat erikokoisia, herää kysymys onko parempi määritellä width y height HTML- tai CSS-tyylitiedostossaYleinen suositus on yleensä keskittää visuaalinen puoli CSS:ssä erottamaan sisältö ja esitystapa, mutta kuvien tapauksessa, jos jokaisella on eri koko, voi olla käytännöllisempää ilmoittaa niiden mitat suoraan tagissa, välttäen liian kömpelöä CSS:ää.

Jos sinulla kuitenkin on useita saman kokoisia kuvia tai haluat käyttää niihin yhteisiä tyylejä (pyöristetyt kulmat, varjot jne.), on järkevää määrittää se tyylitiedostosta, jolloin säilyy yhtenäisyys. puhtaampi ja uudelleenkäytettävä ohjaus design.

Luonnolliset kokoarvot: min-content, max-content, venytys ja fit-content

CSS sisältää myös sarjan erityisarvot, jotka on suunniteltu "luontaisille" kokoilleNäiden avulla voit automaattisesti säätää elementin leveyttä sen sisällön perusteella. Ne ovat erityisen hyödyllisiä edistyneemmissä asetteluissa.

Arvo min-content osoittaa, että elementin on oltava kutistuu minimiin, jotta sen sisältö näkyy rikkomatta sitäJotain tyyliin "mahdollisimman pieni ilman, että sanoja tai sisältöä on virheellisesti katkaistu". Sitä käytetään usein yhdessä säilöjen tai ruudukkojärjestelmien kanssa.

Sitä vastoin, max-content tekee elementin laajenna sisältösi vaatimaan enimmäiskokoonilman lisärajoituksia. Toisin sanoen leveys määräytyy sen mukaan, kuinka paljon tilaa sisällön näyttämiseen tarvitaan.

Arvo stretch Se on suunniteltu siten, että laatikko venytä ja täytä kaikki käytettävissä oleva tila sen säilössä, kun asettelusäännöt sen sallivat. Tämä lähestymistapa on hyvin linjassa joustavien suunnittelujen kanssa, joissa elementit jaetaan täyttämään aukot automaattisesti.

Lopuksi on vielä funktio fit-content()jonka tavoitteena on asettaa koko, joka vastaa mahdollisimman tarkasti sisältöä, mutta ylittämättä määritettyä enimmäisarvoaSen selaintuki on kuitenkin ollut rajoitettua tai osittaista, joten on suositeltavaa tarkistaa sen yhteensopivuus, jos aiot käyttää sitä tuotantoprojekteissa.

Yksinkertaistettu esimerkki näiden arvojen käytöstä olisi:


.box {
background: indigo;
color: white;
height: 150px;
margin: 1rem 0;
}
.min { width: min-content; }
.max { width: max-content; }
.stretch { width: stretch; }


Tämän tyyppisellä kokoonpanolla voit helposti visualisoida, miten Jokainen arvo säätää laatikon leveyttä sen sisällön mukaan.mikä avaa oven melko monimutkaisiin asetteluihin ilman manuaalisten laskelmien tarvetta.

Kuvasuhde: säilytä leveyden ja korkeuden välinen suhde

Toinen keskeinen ominaisuus nykyaikaisessa web-suunnittelussa on aspect-ratio, joka sallii hallita leveyden ja korkeuden välistä kuvasuhdetta CSS-elementin ilman, että molempia kokoarvoja tarvitsee erikseen asettaa.

kanssa aspect-ratio Voit varmistaa, että kuva, video tai mikä tahansa laatikko säilyttää aina sama osuus (esimerkiksi 16:9, 4:3 tai 1:1) jopa silloin, kun kokoa muutetaan responsiivisesti. Tämä estää vääristymiä ja johtaa paljon ennustettavampaan toimintaan.

Hyväksyttyihin arvoihin kuuluvat mm. auto ja mittasuhteet ilmaistuna a / b, esimerkiksi aspect-ratio: 16 / 9;Voit käyttää myös desimaalilukua, joka edustaa leveyden ja korkeuden suhdetta.

Arvo auto Se käskee selainta laskemaan automaattisesti sopivan suhteen, yleensä alkaen arvosta sisällön sisäiset ulottuvuudetToisaalta, kun ilmoitetaan tietty osuus (kuten 3 / 2), selain ylläpitää tätä suhdetta aina kun mahdollista ja säätää toista akselia toisen niistä perusteella.

Tästä ominaisuudesta tulee erityisen hyödyllinen, kun työskentelet kuvagallerioita, kortteja, upotettuja videoita tai uudelleenkäytettäviä komponenttejaTämä yhtenäistää visuaalisen toiminnan ilman "temppuja" tai ylimääräisiä säilöjä. Jos sinulla on vaikeuksia visualisoida leveyden ja korkeuden muutoksia kuvasuhteen muuttuessa, voit aina käyttää online-laskimia kokeillaksesi eri arvoja.

Yksiköt ja parhaat käytännöt kokojen määrittelyssä

Ilmoittaessaan width, height, max-width Ja yrityksessä, ei vain numeerinen arvo ole tärkeä, vaan myös valitsemasi yksikkö. Yleisimmät ovat:

• px (pikseliä): Ne tarjoavat erittäin tarkan ohjauksen ja ovat helppoja ymmärtää, mutta ovat vähemmän joustavia reagoivissa ympäristöissä.
• % (prosenttiosuus): Nämä lasketaan suhteessa pääelementin kokoon, mikä mahdollistaa paremmin säiliöön sovitetut mallit.
• em / rem: fonttikokoihin liittyvät yksiköt; hyödyllisiä, kun haluat Laatikon koko kasvaa tai pienenee typografian mukaan, edistäen esteettömyyttä.

Yleinen suositus on käyttää max-width sijaan width monille globaaleille säilöille, erityisesti lähestymistavassa mobiili-firstTällä tavoin sisältöä voidaan pienentää, kun laite on pieni, mutta se ei laajene liikaa erittäin leveillä näytöillä.

Kannattaa myös pitää silmällä yhdistelmää prosenttiosuudet täyteaineilla ja laatikkomallillaJos pääkontti ei käytä box-sizing: border-box;Reunat ja täyttö voivat aiheuttaa odotettua suuremman efektiivisen leveyden, mikä voi aiheuttaa ylivuotoja tai vaakasuoria vierityspalkkeja.

Pitkien tekstielementtien, lomakkeiden tai keskeisten sisältölaatikoiden kohdalla on usein hyödyllistä asettaa suurin lukuleveys, esimerkiksi max-width: 600px; tai vastaava arvo. Tällä tavoin tekstirivit eivät tule loputtomiksi suurilla näytöillä, mikä parantaa käyttökokemusta.

Lopuksi on parasta välttää liikakäyttöä width kiinteillä pikseliarvoilla näppäinasettelulokkeille. Varaa nämä arvot hyvin spesifiset komponentit (kuvakkeet, painikkeet, koriste-elementit) ja antamalla muun suunnittelun hengittää prosenttiosuuksilla, minimi- ja maksimirajoilla, saadaan yleensä vankempia tuloksia.

Kaiken kaikkiaan, syvällinen tietämys miten ne ovat vuorovaikutuksessa width, height, min/max-*, overflow, luontaiset koot ja kuvasuhde Sen avulla voit rakentaa vankkoja asetteluja, jotka näyttävät hyviltä millä tahansa laitteella ja mukautuvat saumattomasti. Kun sisäistät nämä käsitteet, kunkin elementin koon säätäminen lakkaa olemasta jatkuvaa kamppailua ja siitä tulee työkalu, joka auttaa suunnittelemaan selkeitä, luettavia ja sujuvia käyttöliittymiä.