it-swarm-eu.dev

Pevná šířka vs. dynamická šířka

Všiml jsem si, že stále více webů přešlo na rozvržení s pevnou šířkou, kde změna velikosti okna prohlížeče způsobí, že se zobrazí posuvné pruhy, na rozdíl od flexibilního rozvržení, kde změna velikosti prohlížeče způsobí, že se komponenty stránky „posouvají“ dohromady .
Webové stránky StackExchange, jako je tento, jsou příkladem pevného rozvržení. GMail a iGoogle jsou příklady flexibilního rozvržení. Jaké jsou důvody pro výběr jednoho z druhého?

15
BenV

S rozložením s proměnnou šířkou může být obtížné realizovat složitější návrhy. Takže si představuji, že hraje roli.

Existuje také skutečnost, že není příjemné číst text, který je velmi široký. Velikost sloupce na stránkách StackExchange je docela zvládnutelná a snadno čitelná. S rozložením s proměnnou šířkou nemůžete rozšířit pouze hlavní textové tělo, aniž byste se stali nečitelnými. I Google omezuje šířku svých výsledků vyhledávání.

Samozřejmě, pokud máte web, na kterém je prostor za vyšší cenu (například Dokumenty Google a Mapy Google), opravdu chcete jít s schématem proměnné šířky, abyste využili veškerý dostupný prostor.

11
Kris

Opraveno s je mnohem jednodušší pro vývojáře složitých webů. Většina webů s pevnou šířkou bude také široká kolem 1 000 pixelů. Důvodem je, že pouze 1% prohlížečů používá 800 x 640 a 0% používá 640 x 480. Podívejte se na nejnovější statistiky zde . To však nezahrnuje mobilní zařízení. Což je úplně jiná míčová hra.

Hodnota rozvržení s proměnnou šířkou je taková, že umožňuje uživatelům snadno používat web v okně, které není maximalizováno.

Musíte se podívat na své publikum a rozhodnout se na základě toho, jaké zkušenosti si myslíte, že chtějí, a zda je proměnná šířka důležitější než jiné funkce, které nebudete moci vyvinout, pokud musíte dělat proměnnou šířku.

8
Ben Hoffman

Existuje také kompromis mezi těmito dvěma, kde nastavíte minimální šířku a maximální šířku (pomocí CSS) a pak použijete procentuální šířky, aby zbytek prošel mezi dvěma extrémy. Můžete například chtít, aby se sloupec nabídky na levé straně nezúžil na více než 200 pixelů, ale aby proudil hlavní obsah. Tato technika umožňuje, aby se váš web přizpůsobil rozlišení návštěvníků, aniž by se hloupě díval na extrémně vysoká nebo extrémně nízká rozlišení. Konec konců HTML byl navržen tak, aby plynul - je to značkovací jazyk a není stejný jako tisk.

Tento přístup funguje dobře pro relativně jednoduché návrhy, jako jsou blogy nebo ty, které představují mnoho textových informací. Opravdu to používám na vlastní osobní web . Poté, co všichni lidé nyní mají monitory s širokoúhlou obrazovkou nebo s vysokým rozlišením - můj pracovní monitor je široký 1680px - tak proč by měli ztratit velký stupeň nemovitostí a musí se vodorovně posouvat jednoduše proto, že se návrhář rozhodl pro pevnou šířku, která vyhovovala jejich obrazovka? Nakonec dobrý design je o tom, jak poskytnout uživatelům nejlepší možné zážitky - nejde jen o to, co vypadá „hezky“ na monitoru návrháře.

3
Dan Diplo

Podle Jakob Nielsen 's 113 Pokyny pro návrh pro použitelnost na domovské stránce :

67 Použijte tekuté rozvržení, aby se velikost domovské stránky přizpůsobila různým rozlišením obrazovky.

Je to také jeden z Deset nejvíce porušených pokynů pro návrh domovské stránky :

Boj proti zmrazeným rozvržením se zdá být ztracenou bitvou, ale vyplatí se opakovat: různí uživatelé mají různé velikosti monitoru. Lidé s velkými monitory chtějí mít možnost změnit velikost jejich prohlížečů tak, aby mohli současně prohlížet více oken. Nemůžete předpokládat, že šířka každého okna je 800 pixelů: pro některé uživatele je příliš velká a pro ostatní příliš malá.

1
melhosseiny

Možná nebudete muset dělat tuto volbu. A List Apart má vynikající článek o responzivním design . Hlavní myšlenkou je, že můžete použít dotazy na média k zachycení změn v okně prohlížeče nebo velikosti výřezu a podle potřeby znovu přiřadit CSS. Je toho hodně na čtení, takže se podívejte na článek pro všechny šťavnaté podrobnosti. Ale z dlouhodobého i krátkého hlediska (nebo by to mělo být „široké a úzké“?) Podívejte se na stránky dříve a po jejich příkladu. Stránka dříve se pěkně přizpůsobí až do bodu, ale pokud ji dostatečně zúžíte, bude to trochu neohrabané. Měřítko after se také mění, ale také změní rozvržení, když je příliš úzké pro to, aby škálování fungovalo dobře.

1
Alan

A co smíchání? Pokud je dostatek místa, zobrazí se # obsah-sekce v pevné šířce (70em) - v opačném případě se sekce zmenší na 80% okna zobrazení/prohlížeče.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }
0
feeela

Výhodou dynamického rozvržení je, že funguje na všech velikostech obrazovky, včetně mobilních zařízení. Je však těžší pracovat, aby věci vypadaly dobře ve všech těchto velikostech. Otázkou je, zda - vaši návštěvníci budou používat mobilní zařízení?

0
paulmorriss