1.kapitola
Aliquam erat volutpat. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Nullam rhoncus aliquam metus. Nulla est. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Nullam eget nisl.
Nulla non arcu lacinia neque faucibus fringilla. In enim a arcu imperdiet malesuada. Mauris tincidunt sem sed arcu. Integer vulputate sem a nibh rutrum consequat.
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
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Vivamus porttitor turpis ac leo. Aliquam erat volutpat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis risus. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 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. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Praesent dapibus. Praesent in mauris eu tortor porttitor accumsan. Proin in tellus sit amet nibh dignissim sagittis. Fusce suscipit libero eget elit. Aenean vel massa quis mauris vehicula lacinia. Aliquam id dolor.
Fusce wisi. Maecenas aliquet accumsan leo. Maecenas sollicitudin. Nunc auctor. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Etiam neque. Aliquam erat volutpat. Curabitur vitae diam non enim vestibulum interdum. Aliquam ante. Praesent in mauris eu tortor porttitor accumsan. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Duis viverra diam non justo. Praesent vitae arcu tempor neque lacinia pretium. Mauris metus. Nulla non lectus sed nisl molestie malesuada. Praesent dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse nisl. Duis condimentum augue id magna semper rutrum.
8.kapitola
Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. In convallis. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Aenean placerat. Nam sed tellus id magna elementum tincidunt. Nunc auctor. Nunc tincidunt ante vitae massa. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Integer malesuada. Aenean placerat. Integer malesuada. Integer tempor. Suspendisse nisl.
Praesent vitae arcu tempor neque lacinia pretium. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, 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. Integer malesuada. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam at arcu a est sollicitudin euismod. Praesent in mauris eu tortor porttitor accumsan. Nunc auctor.
Integer malesuada. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Aliquam erat volutpat. Suspendisse sagittis ultrices augue. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce wisi. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam quis quam. Donec iaculis gravida nulla. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu.
Aliquam erat volutpat. Praesent vitae arcu tempor neque lacinia pretium. Aliquam ante. Nulla quis diam. Morbi scelerisque luctus velit. 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. Phasellus rhoncus. Nullam sit amet magna in magna gravida vehicula. Suspendisse sagittis ultrices augue. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim.
Praesent id justo in neque elementum ultrices. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Maecenas aliquet accumsan leo. Proin mattis lacinia justo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Etiam egestas wisi a erat. Nam sed tellus id magna elementum tincidunt. Etiam dictum tincidunt diam. Praesent dapibus. Aenean fermentum risus id tortor. Nullam at arcu a est sollicitudin euismod. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Vestibulum fermentum tortor id mi. Suspendisse sagittis ultrices augue. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Etiam bibendum elit eget erat. Nunc auctor.