Körülbelül a következő percben azt akarom, hogy felejtse el a CSS-t. Felejtsd el a webfejlesztést. Felejtsd el a digitális felhasználói felületeket.
És amikor elfelejted ezeket a dolgokat, azt akarom, hogy hagyd, hogy elméd elkalandozzon. Elkalandozni az időben. Vissza a fiatalságához. Vissza az első iskolai napra.
Egyszerűbb időszak volt, amikor csak a formák rajzolásával és az inkontinencia kordában tartásával kellett aggódnia.
Vessen egy pillantást a fenti pontokra. Figyelje meg, hogy egyesek összetapadnak, és mások szétszóródnak? Azt akarom, hogy tegye, öt csoportra bontja őket számomra, bármennyire is jónak látja.
Menj tovább. Miután ellenőrizte, hogy senki sem figyel, rajzoljon egy kört az öt csoport köré gyermekszerű ujjával.
Valószínűleg valami ilyesmivel állt elő, igaz? (És bármit is csinálsz, ne mondd, hogy a gyakorlat elvégzése nélkül görgett lefelé. A tenyeremmel fogok szembenézni.)
Persze, ez a két pont a jobb oldalon mindkét irányba haladhatott. Ha csoportosítottad őket, az rendben van, azt hiszem. Azt mondják, nincs rossz válasz, de még soha nem tévedtem, ezért soha nem voltam az adott plató fogadó végén.
Mielőtt tovább folytatnám, rajzoltál valami hasonlót az alábbiakhoz?
Valószínűleg nem. Jobb?
De alapvetően ezt tenné, ha a töréspontokat olyan helyekre állítaná be, amelyek megfelelnek a népszerű eszközök pontos szélességének (320 képpont, 768 képpont, 1024 képpont).
Beléptek-e valaha az alábbi természetű szavak a füledbe vagy kiléptek a szádból?
„A közepes töréspont legfeljebb 768 képpont, vagy 768 képpontot tartalmaz? Értem ... és ez az iPad táj, vagy ez „nagy”? Ó, a nagy 768 képpontos és nagyobb. Látom. És kicsi a 320px? Mi ez a tartomány 0 és 319 képpont között? Töréspont a hangyák számára ?Folytathatnám, hogy megmutassam neked a helyes töréspontokat, és ezt otthagyhatom. De nagyon furcsának tartom, hogy a fenti módszer („buta csoportosítás”) annyira elterjedt.
Miért kellene?
Úgy gondolom, hogy a válasz erre a problémára, mint annyi probléma, rosszul illeszkedik a terminológiára. Végül is a vízilabdázás a Guantanamo-öbölben szuper radikálisan hangzik, ha nem tudja, mi ezek a dolgok. (Ó, bárcsak ez lenne a viccem.)
Azt hiszem, összekeverjük a „határokat” és a „tartományokat” a megbeszélések során és a töréspontok megvalósításában.
Mondja, ha töréspontokat végez a Sass-ban, van-e változója $large, vagyis mondjuk 768px?
Ez a tartomány alsó határa, amelyet nagynak nevez, vagy a felső határ? Ha ez az alacsonyabb, akkor nem kell, $smallmert nem, mert annak kell lennie 0, igaz?
És ha ez a felső határ, akkor hogyan határozná meg a töréspontot $large-and-up? Ez kell a média lekérdezés egy min-widthaz $medium, igaz?
És ha csak egy határra hivatkozol, amikor nagynak mondod, akkor a későbbiekben zavarba kerülünk, mert a média lekérdezés mindig tartomány .
Ez a helyzet rendetlenség, és időt vesztegetünk a gondolkodásra. Tehát három javaslatom van:
- Hozd szünet pont jobb
- Nevezze meg ésszerűen a tartományait
- Legyen kijelentő
1. tipp: Helyes legyen a töréspontja
Tehát mik a megfelelő töréspontok?
Óvodai önmaga már felhívta a köröket. Csak téglalapokká változtatom neked.
600, 900, 1200 és 1800 képpontot, ha azt tervezi, hogy az óriásmonitoroknak valami különlegeset ad. Megjegyzendő, hogy ha óriási monitort rendel online, győződjön meg arról, hogy a számítógéphez van megadva. Nem akarsz óriási gyíkot postán kapni.
Azok a pontok, amelyekkel a csatornázott fiatal éned játszott, valójában a 14 leggyakoribb képernyőméretet képviselik:
Tehát egy szép kis képet készíthetünk, amely lehetővé teszi a szavak könnyű áramlását az üzletemberekké, tervezőként, fejlesztőként és tesztelőként öltözött emberek között.
2. tipp: Nevezze meg ésszerűen a tartományait
Persze, ha szeretné, megnevezheti a töréspontját papa-medvének és babamackónak. De ha le akarok ülni egy tervezővel, és megvitatom, hogyan kell kinéznie a webhelynek különböző eszközökön, azt szeretném, ha a lehető leghamarabb véget érne. Ha egy portré álló tábla elnevezése ezt megkönnyíti, akkor eladok. A fene, még azt is megbocsátanám, hogy iPad-portrének hívta.
- De a táj változik! kiabálhat. "A telefonok egyre nagyobbak, a táblagépek egyre kisebbek!"
De webhelye CSS-jének eltarthatósága körülbelül három év (kivéve, ha ez a Gmail). Az iPad ekkor kétszer volt velünk, és még nem került trónfosztásra. És tudjuk, hogy az Apple már nem gyárt új termékeket, csak eltávolítja a dolgokat a meglévőkből (gombok, lyukak stb.).
Tehát 1024 x 768 itt marad, emberek. Ne temessük a fejünket a homokba. (Szórakoztató tény: a struccok nem élnek városokban, mert nincs homok, és így nincs hová bújni a ragadozók elől.)
Következtetés: a kommunikáció fontos. Ne célzottan válassza le magát a hasznos szókincsről.
3. tipp: Legyen deklaratív
Ismét tudom, tudom ezt a „kijelentő” szót. Másképp fogalmazok: a CSS-nek meg kell határoznia, hogy mi akar történni, és nem azt, hogy miként történjen. A „hogyan” el van rejtve valamiféle keverékben.
Mint korábban tárgyaltuk, a töréspontok körüli zűrzavar része, hogy a tartomány nevét olyan változók használják, amelyek meghatározzák a tartomány határát . egyszerűen nincs értelme, ha van egy tartomány. Ugyanaz, mint mondani .$large: 600pxlargevar coordinates = 4;
Tehát elrejthetjük ezeket a részleteket egy mixin belsejében, ahelyett, hogy kitennénk őket a kódban való felhasználásra. Vagy tehetünk egyet jobban, és egyáltalán nem használunk változókat.
Eleinte az alábbi részletet tettem le egyszerűsített példaként. De valójában azt hiszem, hogy minden alapra kiterjed. Ha látni szeretné működés közben, nézze meg ezt a tollat. Azért használom a Sass-t, mert nem tudom elképzelni, hogy enélkül egy webhelyet építsek. A logika ugyanúgy érvényes a CSS-re vagy a Less-re is.
@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; } }Ne feledje, hogy arra kényszerítem a fejlesztőt, hogy adja meg a -upvagy -onlyutótagot.
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:
- 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.
- 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; } }Ja, és mivel az elmúlt bekezdéseken furcsa hangot vettem fel ... sajnálom a bolondot, aki valami varázslatot csinál, mint például a töréspontok tárolása a Sass listában, és rájuk hurcol, hogy kiadja a média lekérdezéseit, vagy valami hasonlóan nevetséges, amellyel a jövőbeli fejlesztők küzdenek megfejteni.
A komplexitás az, ahol a hibák elrejtőznek.Végül gondolhat arra, hogy "nem a tartalomra kellene-e alapoznom a töréspontjaimat, nem az eszközökre?". Nos, csodálkozom, hogy idáig eljutottál, és a válasz igen ... egyetlen elrendezésű webhelyekre. Vagy ha több elrendezése van, és örül, hogy minden egyes elrendezéshez más és más töréspont-készlet tartozik. Ja, és akkor is, ha a webhelye nem változik gyakran, vagy örömmel frissíti a töréspontokat, amikor a tervei frissülnek, mivel a tartalom alapján szeretné megtartani őket, igaz?
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
- 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.
- 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.
- 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.
- Right click a media query in the media queries bar to go to the definition of that rule in the CSS.
Hey, thanks for reading! Comment with your tops ideas, I’d love the hear them. And click the little heart if you think I deserve it, or leave it hollow and empty, like my sense of self-worth will be if you don’t.