rozměr

Resp. Web Design

RWD = Responsive Web Design
znamená, že rozvržení bloků na webové stránce je závislé na velikosti okna (viewportu).

1.příprava dokumentu

2.hraniční šířky

  šířky sloupců se více nezvětšují
------ 1100px ------------------------------------------------
  mění se šířka pouze hlavního bloku (750px - 450px)
------- 800px ------------------------------------------------
  mění se šířka pravého bloku s obrázky (230px - 130px)
------- 700px ------------------------------------------------
  blok s obrázky zmizí, mění se šířka hl.bloku (580px - 450px)
------- 570px ------------------------------------------------
  změna vzhledu a umístění menu

3.CSS možnosti

4.kapitola

Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Aenean fermentum risus id tortor. Phasellus rhoncus. Sed ac dolor sit amet purus malesuada congue. Etiam commodo dui eget wisi. Praesent dapibus. Aliquam erat volutpat.

Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Mauris metus. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Phasellus rhoncus. Quisque tincidunt scelerisque libero. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Curabitur sagittis hendrerit ante.

5.kapitola

Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Aliquam erat volutpat. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Mauris elementum mauris vitae tortor. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim.

Phasellus faucibus molestie nisl. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aliquam id dolor. Mauris tincidunt sem sed arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fermentum tortor id mi. Proin mattis lacinia justo. Duis viverra diam non justo. Curabitur vitae diam non enim vestibulum interdum. Curabitur sagittis hendrerit ante.

Nulla non arcu lacinia neque faucibus fringilla. 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? Mauris tincidunt sem sed arcu. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Fusce wisi. Etiam commodo dui eget wisi. Fusce wisi. Integer tempor. Aenean vel massa quis mauris vehicula lacinia. Pellentesque ipsum. Nam quis nulla. Phasellus faucibus molestie nisl. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Mauris tincidunt sem sed arcu. Aliquam ornare wisi eu metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Suspendisse nisl. 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. Suspendisse nisl.

Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Aenean placerat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Vivamus ac leo pretium faucibus. Aenean vel massa quis mauris vehicula lacinia. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Fusce wisi. Praesent dapibus. Nam sed tellus id magna elementum tincidunt. Maecenas lorem. 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. Integer vulputate sem a nibh rutrum consequat. Donec iaculis gravida nulla. Praesent vitae arcu tempor neque lacinia pretium.

6.kapitola

Aliquam in lorem sit amet leo accumsan lacinia. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Praesent in mauris eu tortor porttitor accumsan. Vivamus porttitor turpis ac leo. Integer in sapien. Curabitur vitae diam non enim vestibulum interdum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aenean id metus id velit ullamcorper pulvinar. Fusce wisi. Mauris tincidunt sem sed 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. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam dictum tincidunt diam. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat.

Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Praesent id justo in neque elementum ultrices. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Nulla pulvinar eleifend sem. Aliquam in lorem sit amet leo accumsan lacinia. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Mauris tincidunt sem sed arcu. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Fusce nibh.

Nulla est. Vivamus luctus egestas leo. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Mauris tincidunt sem sed arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin mattis lacinia justo. Nunc auctor. Cras elementum. Integer pellentesque quam vel velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Et harum quidem rerum facilis est et expedita distinctio. Integer lacinia. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Quisque porta. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Vivamus luctus egestas leo. Aliquam ante. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Nulla est.

7.kapitola

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Aliquam ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas libero. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam eget nisl. Pellentesque sapien. Curabitur bibendum justo non orci. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas sollicitudin. Fusce suscipit libero eget elit. Praesent vitae arcu tempor neque lacinia pretium. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Aenean vel massa quis mauris vehicula lacinia. Nulla est. Sed ac dolor sit amet purus malesuada congue. In convallis. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas sollicitudin. Aliquam erat volutpat. Phasellus rhoncus.

Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui. Nulla quis diam. In enim a arcu imperdiet malesuada. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Etiam egestas wisi a erat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rhoncus. Sed convallis magna eu sem. Fusce consectetuer risus a nunc. Nulla non lectus sed nisl molestie malesuada. Fusce wisi. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis.

Pellentesque pretium lectus id turpis. Etiam quis quam. Integer in sapien. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Cras elementum. Aliquam erat volutpat. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse sagittis ultrices augue. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Vivamus porttitor turpis ac leo. Vestibulum fermentum tortor id mi. Integer in sapien. Fusce tellus.

8.kapitola

Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Vivamus porttitor turpis ac leo. Aliquam erat volutpat. Proin mattis lacinia justo. Etiam posuere lacus quis dolor. Suspendisse sagittis ultrices augue. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Maecenas sollicitudin. Integer in sapien. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Proin in tellus sit amet nibh dignissim sagittis. Duis risus. Curabitur sagittis hendrerit ante. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Donec vitae arcu. Quisque tincidunt scelerisque libero. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis condimentum augue id magna semper rutrum. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Integer vulputate sem a nibh rutrum consequat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus.

Donec quis nibh at felis congue commodo. Morbi scelerisque luctus velit. Fusce nibh. Fusce consectetuer risus a nunc. Pellentesque arcu. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Integer tempor. Aliquam id dolor. Ut tempus purus at lorem. Praesent vitae arcu tempor neque lacinia pretium. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Integer imperdiet lectus quis justo. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Proin in tellus sit amet nibh dignissim sagittis. Phasellus faucibus molestie nisl. Aliquam id dolor. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem.

Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Fusce suscipit libero eget elit. 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? Maecenas sollicitudin. Duis pulvinar. Suspendisse nisl. Nullam faucibus mi quis velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Ut tempus purus at lorem. Fusce suscipit libero eget elit.

9.kapitola

Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Duis pulvinar. Phasellus et lorem id felis nonummy placerat. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Proin in tellus sit amet nibh dignissim sagittis. Sed ac dolor sit amet purus malesuada congue. Nam quis nulla. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. In rutrum. Proin mattis lacinia justo. Vivamus porttitor turpis ac leo. Integer imperdiet lectus quis justo. Nullam dapibus fermentum ipsum. Mauris metus. Maecenas libero. Quisque porta. Integer tempor. Fusce tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla quis diam.

Vivamus luctus egestas leo. Aliquam ornare wisi eu metus. Suspendisse sagittis ultrices augue. Fusce consectetuer risus a nunc. Fusce nibh. Proin in tellus sit amet nibh dignissim sagittis. Quisque porta. Pellentesque pretium lectus id turpis. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Vivamus luctus egestas leo. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit.

Proin in tellus sit amet nibh dignissim sagittis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Aliquam in lorem sit amet leo accumsan lacinia. Aliquam erat volutpat. Nullam eget nisl. Duis pulvinar. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Quisque tincidunt scelerisque libero. Nulla est. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim.