Ako zistiť správne hodnoty minimálnej šírky a maximálnej šírky pre odpovedajúce CSS? - css, citlivý dizajn, mediálne dotazy, hraničné body

Teraz sa ponorím do odpovedajúcich CSS adizajn a zaujímalo by ma, ako by som mal prísť na to, aby boli rôzne šírky zariadení. Nechcem tráviť celodenné testovanie na každom mobilnom prístroji, chcem, aby som dostal dostatočne uspokojivé usporiadanie, kde funguje.

Videla som niektoré stránky @media only screen and (max-device-width: xx) ale zdá sa, že to obmedzuje na veľmi špecifické rozlíšenia, nie na skutočné veľkosti okna prehliadača.

Akákoľvek rada by bola skvelá. Nie som nový na vývoj webových aplikácií alebo CSS, ale úplne nový na uspokojivý dizajn.

odpovede:

Zdá sa, že sa pokúšate zistiť, kde a kedy by ste mali použiť svoje zarážky.

Skôr ako testovanie rozlíšenia na veľa zariadení, prečo nie vybudovať reagujúce dizajn, ktorý je prijateľný na každý Rozlíšenie? Neexistujú žiadne kúzla, ktoré by opravovali odpovedajúce webové stránky pre každé zariadenie, pretože každá citlivá webová stránka sa bude líšiť v závislosti od rozloženia, obsahu atď. A existuje množstvo rôznych zariadení s rôznymi rozlíšením.

Možno si myslíte, "čo sakra, ja sa chystám ísť pixel pixelom a kontrolovať moje webové stránky,"ale to nie je naozaj to, čo myslím.

1. Prejdite do prehliadača, prejdite na svoju webovú stránku a otvorte konzolu
2. Zmena veľkosti výrezu na veľmi malé rozlíšenie. 320px je dobrý východiskový bod.
   (Poznámka: Ak chcete získať veľkosť okna window.innerWidth v konzole. vidieť zdroje pre viac spôsobov, ako zlepšiť ladenie vášho dizajnu)
3. Analyzujte rozloženie. Ako sa pozerá na toto uznesenie? Ak potrebujete zmeniť rozloženie v tomto rozlíšení, potom jeho čas pridať zarážku!
4. Pomaly roztiahnite okno prehliadača, až sa niečo zlomí alebo vyzerá hrozne. V tomto okamihu budete musieť vložiť ďalší zarážku.
5. Opakujte krok 4 na obsah vášho srdca

Mysli na to:

Odpoveďou na to, aby váš web vyzeral dobre na všetkých zariadeniach, aby váš obsah vyzeral dobre kdekoľvek - Sam Richards

zdroje:

• Odozva web design - programovanie s Anthony
• Zodpovedná typografia
• Logické prestávky pre váš dizajn
• Ako bolo uvedené v predchádzajúcom videu, Modernizr je úžasná knižnica JS, ktorá pomáha pri zisťovaní funkcií špecifických pre zariadenie
• Odpovedajúca funkcia Design View vo Firefoxe 15+
• Responzívny návrhový výhľad pre Chrome