100% teisingas būdas padaryti CSS lūžio taškus

Maždaug kitą minutę noriu, kad pamirštumėte CSS. Pamirškite apie interneto plėtrą. Pamirškite apie skaitmenines vartotojo sąsajas.

Kai pamiršite šiuos dalykus, noriu, kad leistumėte mintims klaidžioti. Klaidžioti laiku atgal. Atgal į savo jaunystę. Grįžkite į savo pirmąją mokyklos dieną.

Tai buvo paprastesnis laikas, kai reikėjo nerimauti tik piešiant figūras ir kontroliuojant šlapimo nelaikymą.

Pažvelkite į taškus aukščiau. Atkreipkite dėmesį, kaip kai kurie iš jų susikaupia, o kai kurie iš jų išsiskleidžia? Aš noriu, kad tu darytum, tai suskirstyti juos į penkias grupes man, kad ir kaip tau atrodo tinkama.

Pirmyn. Patikrinę, ar niekas nežiūri, nupieškite ratą aplink kiekvieną iš penkių grupių savo vaikišku pirštu.

Tikriausiai sugalvojai kažką panašaus į žemiau pateiktą, tiesa? (Ir ką padarysi, nesakyk manęs, kad slinkai žemyn neatlikęs pratimo. Aš susidursiu su delnu.)

Aišku, tie du taškai dešinėje galėjo eiti abiem kryptimis. Spėju, jei juos sugrupavote. Jie sako, kad nėra klaidingo atsakymo, bet aš niekada neklydau, todėl niekada nebuvau tos konkrečios platybės priėmimo gale.

Prieš tęsdamas, ar nupiešei kažką panašaus į žemiau pateiktą?

Tikriausiai ne. Ar ne?

Bet iš esmės tai darytumėte, jei nustatytumėte lūžio taškus tokiose vietose, kurios tiksliai atitiktų populiarių įrenginių plotį (320 pikselių, 768 pikselių, 1024 pikselių).

Ar žemesnės prigimties žodžiai kada nors pateko į jūsų ausis ar išėjo iš burnos?

„Ar vidutinis lūžio taškas yra iki 768 pikselių, arba įskaičiuojant 768 taškus ? Matau ... ir tai yra „iPad“ peizažas, ar jis „didelis“? O, didelis yra 768 taškų ir didesnis. Matau. Ir mažas yra 320 taškų? Koks yra diapazonas nuo 0 iki 319 taškų? Atskaitos tašką skruzdėlės ? "

Galėčiau jums parodyti teisingus lūžio taškus ir palikti tai. Bet man labai įdomu, kad minėtas metodas („kvailas grupavimas“) yra toks plačiai paplitęs.

Kodėl taip turėtų būti?

Manau, kad atsakymas į šią problemą, kaip ir tiek problemų, susijęs su neteisinga terminologija. Galų gale, vandenlenčių sportas Gvantanamo įlankoje skamba labai radikaliai, jei nežinote, kas yra tas iš šių dalykų. (O aš norėčiau, kad tai būtų mano pokštas.)

Manau, kad diskutuodami ir įgyvendindami lūžio taškus sumaišome „ribas“ ir „diapazonus“.

Pasakykite man, jei „Sass“ $largeatliekate lūžio taškus, ar turite kintamąjį, vadinamą , tarkime, 768 taškų?

Ar tai apatinė diapazono riba, kurią jūs vadinate didele, ar viršutinė riba? Jei jis yra žemesnis, tada jūs neturite jokio, $smallnes taip turėtų būti 0, tiesa?

Ir jei tai yra viršutinė riba, kaip jūs apibrėžtumėte lūžio tašką $large-and-up? Tai turi būti žiniasklaidos užklausą su min-width$medium, tiesa?

Ir jei jūs sakote tik apie ribą, kai sakote „didelis“, vėliau mes galime painiotis, nes medijos užklausa visada yra diapazonas .

Ši situacija yra netvarka ir mes eikvojame laiką galvodami apie tai. Taigi turiu tris pasiūlymus:

  1. Teisingai nustatykite lūžio taškus
  2. Pavadinkite savo diapazonus protingai
  3. Būk deklaratyvus

1 patarimas: teisingai nustatykite lūžio taškus

Taigi, kokie yra teisingi lūžio taškai?

Jūsų darželio savarankiškumas jau nupiešė ratus. Aš juos tiesiog paversiu stačiakampiais.

600, 900, 1200 ir 1800 taškų, jei planuojate milžiniško monitoriaus žmonėms suteikti ką nors ypatingo. Pažymėtina, kad jei užsisakote milžinišką monitorių internetu, būtinai nurodykite, kad jis skirtas kompiuteriui. Nenorite gauti milžiniško driežo paštu.

Tie taškai, su kuriais žaidė jūsų nukreiptas jaunas aš, iš tikrųjų rodo 14 labiausiai paplitusių ekrano dydžių:

Taigi mes galime padaryti gana mažą paveikslėlį, leidžiantį lengvai judėti žodžiais tarp žmonių, pasipuošusių verslo žmonėmis, dizaineriais, kūrėjais ir testuotojais.

2 patarimas: protingai pavadinkite diapazonus

Žinoma, jei norite, galėtumėte įvardyti papa-bear ir baby-bear. Bet jei ketinu atsisėsti su dizaineriu ir aptarti, kaip svetainė turėtų atrodyti skirtinguose įrenginiuose, noriu, kad ji būtų kuo greičiau baigta. Jei tai palengvina įvardijant portretinį planšetinį kompiuterį , tada aš parduodamas. Heck, aš net atleisčiau, kad pavadinai „iPad portretu“.

"Bet kraštovaizdis keičiasi!" galite sušukti. "Telefonai didėja, planšetiniai kompiuteriai mažėja!"

Tačiau jūsų svetainės CSS galiojimo laikas yra maždaug treji metai (nebent tai yra „Gmail“). „IPad“ tą laiką buvo su mumis du kartus, ir jis vis dar neturi būti nuverstas. Ir mes žinome, kad „Apple“ nebegamina naujų produktų, jie tiesiog pašalina daiktus iš esamų (mygtukus, skylutes ir kt.).

Taigi 1024 x 768 yra čia, kad liktumėte, žmonės. Neapkaskime galvos smėlyje. (Įdomus faktas: stručiai negyvena miestuose, nes nėra smėlio, taigi nėra kur pasislėpti nuo plėšrūnų.)

Išvada: komunikacija yra svarbi. Tikslingai neatsiribokite nuo naudingo žodyno.

3 patarimas: būkite deklaratyvus

Aš vėl žinau, žinau, tą žodį „deklaratyvus“. Aš pasakysiu kitaip: jūsų CSS turėtų apibrėžti, kas nori, o ne tai, kaip turėtų atsitikti. „Kaip“ priklauso nuo kažkokio mišinio.

Kaip aptarta anksčiau, dalis painiavos dėl lūžio taškų yra ta, kad kintamieji, apibrėžiantys diapazono ribą , naudojami kaip diapazono pavadinimas . $large: 600pxtiesiog nėra prasmės, jei largeyra diapazonas. Tai tas pats, kas sakyti var coordinates = 4;.

Taigi mes galime paslėpti šias detales mišinio viduje, o ne parodyti, kad jos bus naudojamos kode. Arba galime padaryti geriau ir visiškai nenaudoti kintamųjų.

Iš pradžių padariau žemiau pateiktą fragmentą kaip supaprastintą pavyzdį. Bet iš tikrųjų manau, kad tai apima visus pagrindus. Norėdami pamatyti, kaip jis veikia, patikrinkite šį rašiklį. Aš naudoju „Sass“, nes neįsivaizduoju, kaip sukurti svetainę be jo. Logika taikoma tiek CSS, tiek mažiau.

@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; } }

Atminkite, kad verčiu kūrėją nurodyti -uparba -onlygalūnę.

Neaiškumai kelia painiavą.

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; } }

O ir kadangi aš per pastaruosius keletą pastraipų įgavau siautulingą toną ... gaila kvailio, kuris daro kažką stebuklingo, pavyzdžiui, saugo taškus „Sass“ sąraše ir juos perduoda, kad išvestų žiniasklaidos užklausas, arba kažkas panašaus juokingo, su kuriuo kovos būsimi kūrėjai. iššifruoti.

Klaidos slepiasi kompleksiškumu.

Galiausiai galite pagalvoti, „ar aš neturėčiau savo lūžio taškų pagrįsti turiniu, o ne įrenginiais?“. Na, aš nustebau, kad taip pavyko, ir atsakymas yra „taip“ svetainėms su vienu išdėstymu. Arba, jei turite kelis išdėstymus ir džiaugiatės, kad kiekvienam maketui turite skirtingus lūžio taškų rinkinius. O taip pat, jei jūsų svetainės dizainas dažnai nesikeičia, ar mielai atnaujinate lūžio taškus, kai atnaujinate dizainą, nes norėsite juos išlaikyti pagal turinį, tiesa?

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.

Ei, ačiū, kad perskaitėte! Pakomentuokite savo viršūnių idėjas, norėčiau jas išgirsti. Spustelėkite mažą širdelę, jei manote, kad esu jos nusipelnęs, arba palikite ją tuščią ir tuščią, pavyzdžiui, mano savivertės jausmas bus, jei ne.