100% õige viis CSS-i murdepunktide tegemiseks

Umbes järgmise minuti jooksul tahan, et unustaksite CSS-i. Unustage veebiarendus. Unustage digitaalsed kasutajaliidesed.

Ja kui need asjad ununevad, tahan, et laseksite oma mõtetel ekselda. Ajas tagasi rändama. Tagasi oma noorpõlve. Tagasi oma esimese koolipäeva juurde.

See oli lihtsam aeg, kui muretsema pidid ainult kujundite joonistamise ja uriinipidamatuse kontrolli all hoidmise pärast.

Heitke pilk ülaltoodud punktidele. Pange tähele, kuidas mõned neist on kokku pandud ja mõned neist laiali? Ma tahan, et te teeksite nad minu jaoks viieks rühmaks, olenemata sellest, milliseks peate.

Lase käia. Pärast seda, kui olete veendunud, et keegi ei jälgi, tõmmake oma lapselaadse sõrmega ring kõigi viie rühma ümber.

Tõenäoliselt mõtlesite välja midagi sellist nagu allpool, eks? (Ja mida iganes sa ka ei teeks, ära ütle mulle, et kerisid harjutust sooritamata alla. Ma seisan näoga palmiga.)

Muidugi, need kaks täppi paremal oleksid võinud minna mõlemale poole. Kui te need kokku rühmitasite, on see vist OK. Nad ütlevad, et valet vastust pole, aga ma pole kunagi eksinud, seega pole ma kunagi olnud selle konkreetse platsi vastuvõtvas otsas.

Enne kui jätkan, kas joonistasite midagi sellist nagu allpool?

Ilmselt mitte. Eks?

Kuid põhimõtteliselt teeksite seda, kui määraksite oma murdepunktid populaarsete seadmete täpse laiusega (320 pikslit, 768 pikslit, 1024 pikslit) vastavatesse kohtadesse.

Kas madalama iseloomuga sõnad on kunagi teie kõrvu sisenenud või suust väljunud?

"Kas keskmine murdepunkt on kuni 768 pikslit või sisaldab ka 768 pikslit? Ma näen ... ja see on iPadi maastik või on see "suur"? Oh, suur on 768 pikslit ja rohkem. Ma näen. Ja väike on 320px? Mis on see vahemik vahemikus 0 kuni 319 pikslit? Murdepunkt sipelgate jaoks ? "

Võiksin teile näidata õigeid murdepunkte ja jätta see sinnapaika. Kuid pean väga kurioosseks, et ülaltoodud meetod ("rumal grupeerimine") on nii laialt levinud.

Miks see peaks olema?

Ma arvan, et vastus sellele probleemile, nagu ka paljud probleemid, taandub valesti joondatud terminoloogiale. Lõppude lõpuks kõlab Guantanamo lahe veesõit super rad, kui te ei tea, mis neist asjadest on. (Oh, ma soovin, et see oleks minu nali.)

Ma arvan, et segame aruteludes ja murdepunktide rakendamisel "piirid" ja "vahemikud".

Öelge mulle, kui teete $largeSassis murdepunkte, kas teil on muutuja nimega 768 pikslit?

Kas see on selle vahemiku alumine piir, mida te nimetate suureks, või ülemine piir? Kui see on madalam, siis ei tohi teil olla, $smallsest see peaks olema 0, eks?

Ja kui see on ülemine piir, siis kuidas määratleksite murdepunkti $large-and-up? See peab olema meedia päringu koos min-widthon $medium, eks?

Ja kui peate suureks ütlemisel lihtsalt piiri, siis oleme hiljem segaduses, kuna meediumipäring on alati vahemik .

See olukord on segadus ja raiskame sellele mõtlemisele aega. Nii et mul on kolm ettepanekut:

  1. Võta oma break punkti õigus
  2. Nimetage oma vahemikud mõistlikult
  3. Ole deklaratiivne

Vihje nr 1: saate oma murdepunktid õigeks

Millised on siis õiged murdepunktid?

Teie lasteaia ise tõmbas juba ringe. Ma muudan need lihtsalt teie jaoks ristkülikuteks.

600px, 900px, 1200px ja 1800px, kui kavatsete anda hiiglasliku kuvari inimestele midagi erilist. Vahemärkusena võib öelda, et kui tellite hiiglasliku kuvari veebist, siis määrake see kindlasti arvuti jaoks. Sa ei taha hiiglaslikku sisalikku posti saada.

Need punktid, millega teie kanaliseeritud noor ise on mänginud, esindavad tegelikult 14 kõige tavalisemat ekraanisuurust:

Nii saame teha üsna väikese pildi, mis võimaldab hõlpsalt sõnu liikuda äriinimesteks, disaineriteks, arendajateks ja testijateks riietatud inimeste vahel.

Vihje nr 2: nimetage oma vahemikud mõistlikult

Muidugi, kui soovite, võiksite oma murdepunktid nimetada papakaruks ja beebikaruks. Aga kui kavatsen disaineriga maha istuda ja arutada, kuidas sait peaks erinevates seadmetes välja nägema, tahan, et see oleks võimalikult kiiresti läbi. Kui portree suurusega tahvli nimetamine seda hõlbustab, siis ma olen müüdud. Pagan, ma isegi annaksin teile andeks, et nimetasite seda „iPadi portreeks“.

"Aga maastik muutub!" võite karjuda. "Telefonid muutuvad suuremaks, tahvelarvutid väiksemaks!"

Kuid teie veebisaidi CSS-i säilivusaeg on umbes kolm aastat (kui see pole Gmail). IPad on olnud meiega seda aega kaks korda ja see pole veel troonilt tulnud. Ja me teame, et Apple ei valmista enam uusi tooteid, vaid lihtsalt eemaldab asjad olemasolevatest (nupud, augud jne).

Nii et 1024 x 768 on siin, et jääda, inimesed. Ärgem mattigem oma pead liiva sisse. (Lõbus fakt: jaanalinnud ei ela linnades, sest seal pole liiva ja seega pole kiskjate eest kuhugi varjuda.)

Järeldus: suhtlemine on oluline. Ära lahku sihikindlalt kasulikust sõnavarast.

Vihje nr 3: olge deklaratiivne

Ma tean, ma tean, see sõna "deklaratiivne" jälle. Ma ütlen selle teisiti: teie CSS peaks määratlema, mis see juhtuma tahab, mitte selle, kuidas see juhtuma peaks. "Kuidas" kuulub mingisugusesse segusse.

Nagu varem arutletud, on segaduste piirpunktide ümber segaduses see, et vahemiku nimena kasutatakse muutujaid, mis määravad vahemiku piiri . pole lihtsalt mõtet, kui see on vahemik. See on sama mis öelda .$large: 600pxlargevar coordinates = 4;

Seega võime need üksikasjad peita mikserisse, mitte paljastada neid koodis kasutamiseks. Või saame teha ühe paremini ja muutujaid üldse mitte kasutada.

Algul tegin lihtsustatud näitena alloleva jupi. Aga tegelikult arvan, et see hõlmab kõiki aluseid. Selle toimimiseks nägemiseks vaadake seda pastakat. Kasutan Sassi, sest ma ei kujuta ette saidi ehitamist ilma selleta. Loogika kehtib CSS-i või vähem sama kohta.

@mixin for-phone-only { @media (max-width: 599px) { @content; } } @mixin for-tablet-portrait-up { @media (min-width: 600px) { @content; } } @mixin for-tablet-landscape-up { @media (min-width: 900px) { @content; } } @mixin for-desktop-up { @media (min-width: 1200px) { @content; } } @mixin for-big-desktop-up { @media (min-width: 1800px) { @content; } } // usage .my-box { padding: 10px; @include for-desktop-up { padding: 20px; } }

Pange tähele, et sunnin arendajat määrama -upvõi -onlyjärelliite.

Ebamäärasus tekitab segadust.

An obvious criticism might be that this doesn’t handle custom media queries. Well good news, everybody. If you want a custom media query, write a custom media query. (In practice, if I needed more complexity than the above I’d cut my losses and run into the loving embrace of Susy’s toolkit.)

Another criticism might be that I’ve got eight mixins here. Surely a single mixin would be the sane thing to do, then just pass in the required size, like so:

@mixin for-size($size) { @if $size == phone-only { @media (max-width: 599px) { @content; } } @else if $size == tablet-portrait-up { @media (min-width: 600px) { @content; } } @else if $size == tablet-landscape-up { @media (min-width: 900px) { @content; } } @else if $size == desktop-up { @media (min-width: 1200px) { @content; } } @else if $size == big-desktop-up { @media (min-width: 1800px) { @content; } } } // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } }

Sure, that works. But you won’t get compile-time errors if you pass in an unsupported name. And to pass in a sass variable means exposing 8 variables just to pass to a switch in a mixin.

Not to mention the syntax @include for-desktop-up {...} is totes more pretty than @include for-size(desktop-up) {...}.

A criticism of both these code snippets might be that I’m typing out 900px twice, and also 899px. Surely I should just use variables and subtract 1 when needed.

If you want to do that, go bananas, but there are two reasons I wouldn’t:

  1. These are not things that change frequently. These are also not numbers that are used anywhere else in the code base. No problems are caused by the fact that they aren’t variables — unless you want to expose your Sass breakpoints to a script that injects a JS object with those variables into your page.
  2. The syntax is nasty when you want to turn numbers into strings with Sass. Below is the price you pay for believing that repeating a number twice is the worst of all evils:
@mixin for-size($range) { $phone-upper-boundary: 600px; $tablet-portrait-upper-boundary: 900px; $tablet-landscape-upper-boundary: 1200px; $desktop-upper-boundary: 1800px; @if $range == phone-only { @media (max-width: #{$phone-upper-boundary - 1}) { @content; } } @else if $range == tablet-portrait-up { @media (min-width: $phone-upper-boundary) { @content; } } @else if $range == tablet-landscape-up { @media (min-width: $tablet-portrait-upper-boundary) { @content; } } @else if $range == desktop-up { @media (min-width: $tablet-landscape-upper-boundary) { @content; } } @else if $range == big-desktop-up { @media (min-width: $desktop-upper-boundary) { @content; } } } // usage .my-box { padding: 10px; @include for-size(desktop-up) { padding: 20px; } }

Oh, ja kuna ma olen viimaste lõikudega räpase tooni omandanud ..., on mul kahju lollist, kes teeb midagi maagilist, nagu poe murdepunktid Sassi nimekirjas, ja hoiab neid üle meediumipäringute väljastamiseks või midagi sarnast naeruväärset, millega tulevased arendajad võitlevad lahti mõtestama.

Vead peituvad keerukuses.

Lõpuks võite mõelda: "kas ma ei peaks oma katkestuspunkte lähtuma sisust, mitte seadmetest?" Ma olen üllatunud, et jõudsite nii kaugele ja vastus on jah ... ühe paigutusega saitide puhul. Või kui teil on mitu paigutust ja olete õnnelik, kui teil on iga paigutuse jaoks erinev murdepunktide komplekt. Oh, ja ka siis, kui teie saidi kujundus ei muutu sageli või värskendate oma disainipunktide värskendamisel hea meelega oma murdepunkte, kuna soovite neid sisu põhjal säilitada ?

For complex sites, life is much easier if you pick a handful of breakpoints to use across the site.

We’re done! But this post has not been as furry as I would like, let me see if I can think of an excuse to include some…

Oh, I know!

Bonus tips for breakpoint development

  1. If you need to experience CSS breakpoints for screen sizes bigger than the monitor you’re sitting at, use the ‘responsive’ mode in Chrome DevTools and type in whatever giant size you like.
  2. The blue bar shows ‘max-width’ media queries, the orange bar is ‘min-width’ media queries, and the green bar shows media queries with both a min and a max.
  3. Clicking a media query sets the screen to that width. If you click on a green media query more than once, it toggles between the max and min widths.
  4. Right click a media query in the media queries bar to go to the definition of that rule in the CSS.

Hei, aitäh lugemast! Kommenteerige oma tippude ideid, mulle meeldiks neid kuulda. Ja klõpsake väikest südant, kui arvate, et väärin seda, või jätke see õõnsaks ja tühjaks, nagu mu eneseväärikuse tunne on, kui te seda ei tee.