Și când uiți de toate astea, vreau ca conștiința ta să meargă într-o călătorie. O călătorie în trecut. Înapoi în copilărie. În prima zi la școală.
Mult atunci a fost mai ușor atunci când singura dvs. preocupare a fost de a atrage figuri și a încerca să vă păstrați în mână.
Uită-te la aceste puncte. Vedeți că unii dintre ei s-au adunat împreună, iar unii sunt bătut? Vreau să le distrugi în cinci grupuri, ceea ce ți se pare logic.
Ai curaj. Asigurați-vă că nimeni nu se uită și trageți în jurul fiecăruia dintre cele cinci grupuri ale cercului cu degetul, la fel ca în copilărie.
Cel mai probabil ai ceva de genul asta, nu? (Doar nu-mi spuneți că ați derulat fără a face acest exercițiu.) Sunt foarte supărat.)
Desigur, cele două puncte din dreapta ar putea fi subliniate în moduri diferite. Dacă le puneți împreună într-un grup, cred că este bine. Ei spun că nu există un răspuns greșit, dar am întotdeauna dreptate, așa că nu trebuie să ascult această consolare trivială.
Înainte de a continua, nu ați făcut exact așa ceva?
Dar este esențial ceea ce faceți atunci când stabiliți puncte de control în poziții care corespund lățimii exacte a dispozitivelor specifice (320px, 768px, 1024px).
Ați auzit vreodată o mumănie așa de nedumerită? Sau poate ați fost?
"Punctul mediu de control este de până la 768 de pixeli incluzând sau nu? Deci, văd ... este acest iPad în modul portret, sau este deja "mare"? Da, cel mare este de 768 de pixeli și mai mare. Este cea mică de 320px? Care este atunci intervalul de la 0 la 319px? Punctul de referință pentru furnici?
Mă pot opri la asta și merg direct la punctele de control corecte. Dar sunt curios de ce metoda descrisă mai sus ("gruparea proastă") este atât de comună.
De ce sa întâmplat asta?
Cred că răspunsul la această ghicitoare, ca și multe altele, se reduce la o terminologie confuză. În cele din urmă, propunerea de a bea vodcă regală din cana lui Esmarha ar putea părea foarte tentantă, dacă nu știți ce este (de ce, de ce este cuvântul similar, dar chiar mai fin în engleză, nu gluma mea?).
Cred că în discuțiile și implementarea punctelor de control confundăm "frontierele" și "gamele".
Spuneți-mi, dacă faceți puncte de control în Sass, porniți variabila $ large cu o valoare, să zicem, 768px?
Aceasta este limita inferioară a intervalului, pe care o numiți mare ("mare") sau superioară? Dacă este mai mică, atunci variabila $ small nu ar trebui să fie, deoarece ar trebui să fie 0. deci de fapt?
Și dacă aceasta este limita superioară, cum determinați punctul de control mare și mare? Aceasta ar trebui să fie o expresie media cu min-lățime. egal cu $ mediu. asa?
Și dacă o numiți atât de limită, atunci suntem confuzi mai târziu, pentru că expresia mass-media este întotdeauna o gamă.
Se pare o mizerie, și chiar gândiți-vă la ea - în timp de timp de a petrece. Așadar, am trei sfaturi:
- Selectați punctele de control corect
- Intervale de apel cu înțeles
- Scrie codul declarativ
Sfat # 1: Selectați corect punctele de control
Care este punctul de control potrivit?
Gradinita ta "I" a atras deja cercuri. Tocmai ți-am făcut dreptunghiuri din ele.
600px, 900px, 1200px și 1800px dacă intenționați să faceți ceva special pentru monitoarele gigant. Doar în cazul în care, dacă comandați "monitorul gigant" pe Internet, specificați că este unul de calculator. Dacă trimiteți o navă blindată veche. poți lua multe pentru transport.
Punctele pe care tocmai le-a jucat copilul dvs. reprezintă cele mai comune 14 dimensiuni ale ecranului:
Deci, puteți face o imagine drăguță, care vă permite să găsiți cu ușurință o limbă comună pentru toți cei care se construiesc de la oameni de afaceri, designeri, dezvoltatori și testeri, respectiv.
În zadar am ales culori portocalii și verzi, dar nu modifică acum toate imaginile
Sfat # 2. Apelați intervalele cu semnificație
Desigur, nimeni nu se deranjează să numească punctele de control "tată-urs" și "urs mic". Dar dacă am de gând să stau cu designerul și să discut despre modul în care site-ul ar trebui să arate pe diferite dispozitive, vreau să închei rapid cu el. Dacă pentru aceasta trebuie să apelați dimensiunea tabletei în poziție portret - este potrivit pentru mine. Fur-stick, să spunem "iPad în poziție portret", nu voi fi ofensat.
Dar data de expirare pentru CSS a site-ului dvs. este de aproximativ trei ani (dacă nu este Gmail). iPad-ul cu noi este de două ori mai lung, iar de la tron nu a fost încă lansat. Și știm că Apple nu mai produce produse noi, ci doar scoate ceva (butoane, găuri etc.) de la cele existente.
Deci 1024-768 este pentru o lungă perioadă de timp, băieți. Nu-ți ascunde capul în nisip (un fapt interesant: struții nu se găsesc în orașe, pentru că nu există nisip, ceea ce înseamnă că nu există unde să se ascundă de prădători).
Concluzie: fără comunicare nu există înțelegere reciprocă. Nu respinge în mod deliberat cuvinte utile.
Sfat # 3. Scrie codul declarativ
Știu, știu, din nou, acest cuvânt este "declarativ". Voi spune într-un alt mod: CSS-ul dvs. ar trebui să determine ce se întâmplă în el și nu cum ar trebui să se întâmple. Acest "mod" este mai bine ascuns într-o mixină specială.
Așa cum am văzut deja, o sumă destul de confuză cu punctele de control constă în faptul că variabilele care denotă limita intervalului sunt numite aceleași ca și intervalul propriu-zis. $ Big: 600px pur și simplu nu are sens, dacă este mare gama. Este ca și cum a spune var coordonate = 4; .
Deci, toate detaliile tehnice pot fi ascunse în mixin, mai degrabă decât să fie folosite în mod deschis în cod. Și este posibil și chiar mai bine - în general, fără variabile.
Exemplul de mai jos, pe care l-am făcut inițial ca unul simplificat. Dar, de fapt, în opinia mea, acoperă tot ce aveți nevoie. Puteți să o aruncați o privire în acțiune pe Codepen. Eu folosesc Sass pentru că nu mă gândesc la un site fără ea. Dar logica în CSS sau Less va fi aceeași.
Poate că sunt părtinitoare, dar, cum ar fi, destul de frumos CSS declarativ
Rețineți că îi oblig pe dezvoltator să precizeze sufixul -up ("și mai sus") sau -only ("și numai").
Ambiguitatea generează confuzie
Puteți căuta imediat că acest lucru nu funcționează cu expresii media arbitrare. Vesti bune. Dacă aveți nevoie de un mediavyrazhenie arbitrar, scrie (în practică, dacă am nevoie de ceva mai complicat exemplu de mai sus, nu am de gând să fac un prost de cap și imediat mă arunc în brațele iubitei sale Susie cu unelte ei).
Un alt dezavantaj este că am opt mixine aici. Desigur, ar fi prudent să faci un singur mixin și apoi să transferi dimensiunile necesare, cum ar fi:
Da, funcționează. Dar dacă transmiteți un nume neacceptat, compilatorul nu vă va arăta nici o eroare. Și pentru a trece o variabilă sass este de a face 8 variabile disponibile în cod, și numai pentru a le da la comutatorul în mixin.
Să nu mai menționăm că sintaxa lui @ include pentru desktop-up este frumoasă din toate părțile decât @ include pentru dimensiune (desktop-up).
Ambele exemple de cod pot fi certate pentru faptul că scriu de două ori 900px și 899px. Desigur, puteți face o variabilă și luați 1, dacă este necesar.
Vrei acest lucru - un steag în mâinile tale, dar nu aș face-o, și de aceea:
- Acesta nu este ceva care se schimbă adesea. Acestea nu sunt numerele utilizate în întregul cod. De la faptul că nu sunt variabile, nu există probleme - dacă nu doriți să oferiți punctelor de control Sass accesul la un script care introduce o obiect JS cu aceste variabile în pagină.
- Sintaxa pentru traducerea numerelor în șiruri în Sass este teribilă. Mai jos este prețul pe care îl plătiți pentru că credeți că repetarea numărului de două ori este cel mai grav rău:
Ei bine, cum sa îmbunătățit lizibilitatea? Sau invers?
Ei bine, din moment ce eu sunt în ultimul paragraf a luat o astfel de ton agresiv ... Vai de prostul care face unele puncte de control de stocare de tip Mojo din Sass-list și afișează mediavyrazheniya, ocolind ciclul său, sau altceva la fel de absurd ca celalalt dezvoltatorii nu descifrează secolul.
Unde este complexitatea, acolo și bug-uri
În cele din urmă, s-ar putea să vă gândiți, "Nu este mai corect să porniți la punctele de control de la conținut, mai degrabă decât de la dispozitive?". Ei bine, e minunat să le citești până aici, iar răspunsul este "da" ... pentru site-uri cu un aspect. Sau dacă aveți mai multe machete și vă simțiți confortabil să faceți setul de puncte de control pentru fiecare. Și dacă designul site-ului dvs. nu se schimbă adesea sau vă convine să actualizați punctele de control de fiecare dată când actualizați designul, deoarece doriți ca acestea să depindă în continuare de conținut, nu?
Cu site-uri complexe, este mult mai ușor să trăiești dacă folosiți același set de puncte de control pe întreg site-ul.
Totul! Dar, în mod clar, această notă nu are suficientă fluență, să mă gândesc, nu va exista un motiv pentru mine să adaug un pic ...
Sfaturi suplimentare pentru dezvoltarea punctelor de control
Da, chiar și flickr are puncte de control pe 768 și 1400
- Dacă doriți să vedeți punctele de control CSS în acțiune pentru ecrane cu o rezoluție mai mare decât monitorul în care locuiți, utilizați modul "receptiv" din depanatorul Chrome și introduceți o dimensiune uriașă arbitrar.
- Bara albastră prezintă expresii media pentru "max-width", portocaliu pentru "min-width" și verde pentru expresii media, în care există ambele.
- Dacă faceți clic pe expresia media, ecranul este setat la această lățime. Dacă faceți clic pe expresia media verde de mai multe ori, comută între lățimea maximă și cea minimă.
- Faceți clic dreapta pe expresia media din panoul Exprimare media pentru a ajunge la definiția acestei reguli în CSS.
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima modificare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
De la Paris (foto), care a trecut recent CSS intalnire de lucru de grup, a sosit știri amuzant: Proprietăți grilă-rând-gap și grila coloana-decalaj, precum și reducerea grilă decalaj ...