Přizpůsobte webovky všem typům zařízením-návod jak na to!
Napsal: 20 bře 2013, 12:20
Velký problém těchto webovek je nepřizpůsobení obrazovky a tím donucení rolování všemi směry pro viditelnost prvků, které hledám. Proto jsem hledal způsob jak optimalizovat tyto stránky a nejjednodušším způsobem ( skoro bez práce ) uplatnit změny v praxi.
Veškerý trik pro přizpůsobení stránek různým zařízením ( jako je mobil, čtečka, PC, NTB, Tablet ... s různým rozlišením) je v CSS stylech.
Zde je ukázka webu v kterém jsou již uplatněny změny pro přizpůsobení zobrazování stránky :
http://css-tricks.com/examples/Resoluti ... le-one.php
stránku si zkuste libovolně zmenšit, či zvětšit a nebo ji otevřete jiným zařízením a zjistíte jak se přizpůsobuje ....
Tato stránka má tyto parametry:
nejmenší okno je nataveno na hodnoty: 700px a méně
prostřední okno je nastaveno na hodnoty: 701 - 900px
největší okno je nastaveno na hodnoty: větší než 901px
číselné hodnoty samozřejmě lze změnit dle vaší představy . Jsou jakýmsi ohraničením velikosti internetového prohlížeče a pokud se dostanou do předefinovaných hodnot uplatní změnu velikosti.
v praxi to vypadá ve zdrojovém kódu takto:
<head>
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
</head>
kde např. v prvním odkazovaném stylu s názvem narrow se řeší hlavně vycentrování stránky, dle hlavních hodnot ....
body { background: #333; }
#page-wrap { width: 548px; }
#page-wrap:after { content: "Narrow Layout"; }
#secondary-two { display: none; }
Zde jsou soubory ke stažení šablon ukázkové stránky, podle které se dají uplatnit změny pro webovky LinuxMintu : http://css-tricks.com/examples/Resoluti ... Layout.zip
a tu je zdroj z kterého jsem hlavně vycházel a je tu i mnoho užitečných triků jak posunout webovky do 21.století ...
http://css-tricks.com/resolution-specific-stylesheets/
Veškerý trik pro přizpůsobení stránek různým zařízením ( jako je mobil, čtečka, PC, NTB, Tablet ... s různým rozlišením) je v CSS stylech.
Zde je ukázka webu v kterém jsou již uplatněny změny pro přizpůsobení zobrazování stránky :
http://css-tricks.com/examples/Resoluti ... le-one.php
stránku si zkuste libovolně zmenšit, či zvětšit a nebo ji otevřete jiným zařízením a zjistíte jak se přizpůsobuje ....
Tato stránka má tyto parametry:
nejmenší okno je nataveno na hodnoty: 700px a méně
prostřední okno je nastaveno na hodnoty: 701 - 900px
největší okno je nastaveno na hodnoty: větší než 901px
číselné hodnoty samozřejmě lze změnit dle vaší představy . Jsou jakýmsi ohraničením velikosti internetového prohlížeče a pokud se dostanou do předefinovaných hodnot uplatní změnu velikosti.
v praxi to vypadá ve zdrojovém kódu takto:
<head>
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
</head>
kde např. v prvním odkazovaném stylu s názvem narrow se řeší hlavně vycentrování stránky, dle hlavních hodnot ....
body { background: #333; }
#page-wrap { width: 548px; }
#page-wrap:after { content: "Narrow Layout"; }
#secondary-two { display: none; }
Zde jsou soubory ke stažení šablon ukázkové stránky, podle které se dají uplatnit změny pro webovky LinuxMintu : http://css-tricks.com/examples/Resoluti ... Layout.zip
a tu je zdroj z kterého jsem hlavně vycházel a je tu i mnoho užitečných triků jak posunout webovky do 21.století ...
http://css-tricks.com/resolution-specific-stylesheets/