1.kapitola
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce suscipit libero eget elit. Et harum quidem rerum facilis est et expedita distinctio. Fusce aliquam vestibulum ipsum. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. In rutrum. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Nam sed tellus id magna elementum tincidunt. Etiam commodo dui eget wisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Cras elementum. Etiam commodo dui eget wisi.
Příprava dokumentu
- šířky sloupců odpovídají obsahu
- zjednodušit dokument - odstranit zbytečnosti
- nahradit <a name="..." zápisem <h2 id="..."
- definice css proměnných dát do bloku html
- nastavit @media print
- zobrazit aktuální velikost Viewportu
Změny rozložení pro různé šířky okna
ViewPortSize- >1100px ... šířky sloupců se už nezvětšují
- 1100px-800px ... mění se šířka pouze hlavního bloku
- 800px-700px ... mění se šířka pruhu s obrázky
- 700px-570px ... obrázky mizí, mění se šířka hl.bloku
- 570px-450px ... změna umístění a vzhledu menu
Možnosti stylopisu
- funkce minmax(450px,750px) v definici mřížky pro omezení velikosti
- jednotka 1fr v definici mřížky (= fragment mřížky)
- body zlomu (breakpoints) v definici @media screen
- vlastnost maxwidth k nastavení správné velikosti obrázků
Rady pro psaní responzivních stránek
- nastavit viewport <meta name="viewport"...
- nastavit body zlomu @media screen and ...
- používat okrajivý box-model * {box-sizing:border-box;}
- omezit pevné šířky sloupců
- používat relativní délkové jednotky em(margin) rem(font-size) %(width)
- vhodně používat obrázky, videa img,video,svg {max-width:100%;...
- někdy skrývat obsah {display:none;}
Odkazy
7.kapitola
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Pellentesque pretium lectus id turpis. Duis pulvinar. Suspendisse nisl. Aenean fermentum risus id tortor. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nulla quis diam. Etiam bibendum elit eget erat. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam.
Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Etiam bibendum elit eget erat. Integer pellentesque quam vel velit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc auctor. Donec vitae arcu. Aenean fermentum risus id tortor. Integer pellentesque quam vel velit. Vivamus porttitor turpis ac leo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Pellentesque arcu. Nulla quis diam.
Praesent in mauris eu tortor porttitor accumsan. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Vivamus ac leo pretium faucibus. Integer pellentesque quam vel velit. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Maecenas lorem. Aliquam id dolor. Integer pellentesque quam vel velit. Fusce consectetuer risus a nunc. Integer malesuada. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien.
8.kapitola
Etiam quis quam. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam neque. Donec quis nibh at felis congue commodo. Sed convallis magna eu sem. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. In dapibus augue non sapien. Mauris elementum mauris vitae tortor. Mauris tincidunt sem sed arcu. Aliquam in lorem sit amet leo accumsan lacinia. Mauris tincidunt sem sed arcu. Duis viverra diam non justo. Aliquam erat volutpat.
Vestibulum fermentum tortor id mi. Nullam sit amet magna in magna gravida vehicula. Curabitur vitae diam non enim vestibulum interdum. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce aliquam vestibulum ipsum. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Pellentesque ipsum. Vestibulum fermentum tortor id mi. Aliquam id dolor.
Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Nam quis nulla. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam dapibus fermentum ipsum. Quisque porta. Etiam commodo dui eget wisi. Duis condimentum augue id magna semper rutrum. Etiam commodo dui eget wisi. Fusce suscipit libero eget elit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut tempus purus at lorem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Vestibulum fermentum tortor id mi. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Fusce wisi. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Etiam egestas wisi a erat. Phasellus faucibus molestie nisl.
Aliquam ante. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Nulla quis diam. Suspendisse nisl. Pellentesque pretium lectus id turpis. Nunc tincidunt ante vitae massa. Integer pellentesque quam vel velit. In dapibus augue non sapien. Suspendisse nisl. Nunc dapibus tortor vel mi dapibus sollicitudin. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Donec iaculis gravida nulla. Fusce consectetuer risus a nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.