1.kapitola
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc tincidunt ante vitae massa. Sed ac dolor sit amet purus malesuada congue. Vivamus porttitor turpis ac leo. In enim a arcu imperdiet malesuada. Pellentesque ipsum. Fusce consectetuer risus a nunc. In enim a arcu imperdiet malesuada. Ut tempus purus at lorem. Proin in tellus sit amet nibh dignissim sagittis. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat.
Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.
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
Qenean id metus id velit ullamcorper pulvinar. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Praesent in mauris eu tortor porttitor accumsan. Ut tempus purus at lorem. Vivamus luctus egestas leo. Nunc dapibus tortor vel mi dapibus sollicitudin. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nullam faucibus mi quis velit. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aliquam in lorem sit amet leo accumsan lacinia. Nam quis nulla. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Nullam dapibus fermentum ipsum. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Etiam quis quam. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Fusce wisi. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Proin mattis lacinia justo.
Aliquam erat volutpat. Ut tempus purus at lorem. Morbi leo mi, nonummy eget tristique non. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Sed ac dolor sit amet purus malesuada congue. Pellentesque sapien. Nullam sit amet magna in magna gravida vehicula.
Nunc auctor. Donec vitae arcu. 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. Et harum quidem rerum facilis est et expedita distinctio. Vivamus ac leo pretium faucibus. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nunc dapibus tortor vel mi dapibus sollicitudin. Aliquam erat volutpat. Cras elementum. Nulla non lectus sed nisl molestie malesuada. Nullam rhoncus aliquam metus.
8.kapitola
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Etiam bibendum elit eget erat. Fusce nibh. Integer malesuada. Sed convallis magna eu sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Fusce nibh. Integer malesuada. Nunc auctor. Nullam sit amet magna in magna gravida vehicula. Integer pellentesque quam vel velit. Maecenas lorem.
In rutrum. Vestibulum fermentum tortor id mi. Pellentesque ipsum. In convallis. Nunc auctor. Quisque tincidunt scelerisque libero. Duis condimentum augue id magna semper rutrum. Aliquam erat volutpat. Nunc auctor. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Nam quis nulla. Nunc auctor. Aenean id metus id velit ullamcorper pulvinar. Mauris dictum facilisis augue. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam.