{"id":317,"date":"2011-02-20T16:54:16","date_gmt":"2011-02-20T15:54:16","guid":{"rendered":"http:\/\/www.capri-soft.de\/blog\/?p=317"},"modified":"2011-02-20T16:55:59","modified_gmt":"2011-02-20T15:55:59","slug":"responsive-design","status":"publish","type":"post","link":"https:\/\/www.capri-soft.de\/blog\/?p=317","title":{"rendered":"Responsive Design \/ Layoutgestaltung f\u00fcr jede Bildschirmaufl\u00f6sung"},"content":{"rendered":"<h1>Aufgabenstellung<\/h1>\n<p>Ein HTML-Layout soll sich automatisch an die Gegebenheiten des Endger\u00e4tes anpassen, egal ob mobiles Endger\u00e4t oder eine Gro\u00dfleinwand<\/p>\n<h1>Ansatz<\/h1>\n<p>Responsive Design funktioniert durch die Verwendung des @media-Tags von CSS. Das Layout richtet sich an der Bildschirmaufl\u00f6sung und der Orientierung des Endger\u00e4tes<\/p>\n<h1>L\u00f6sung<\/h1>\n<p>Aufbau der CSS-Datei:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n@media (min-width: 950px) \r\n{\r\n  \/* Hohe Aufl\u00f6sung *\/\r\n}\r\n\r\n@media (min-width: 450px) and (max-width: 900px)\r\n{\r\n  \/* Mittlere Aufl\u00f6sung *\/\r\n}\r\n\r\n@media (max-width: 450px) \r\n{\r\n  \/* Kleine Aufl\u00f6sung *\/ \r\n}\r\n<\/pre>\n<p>Quelle: www.mariofink.de<\/p>\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Fwww.capri-soft.de%2Fblog%2F%3Fp%3D317&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px;margin-top:5px;\"><\/iframe>","protected":false},"excerpt":{"rendered":"<p>Aufgabenstellung Ein HTML-Layout soll sich automatisch an die Gegebenheiten des Endger\u00e4tes anpassen, egal ob mobiles Endger\u00e4t oder eine Gro\u00dfleinwand Ansatz Responsive Design funktioniert durch die Verwendung des @media-Tags von CSS. Das Layout richtet sich an der Bildschirmaufl\u00f6sung und der Orientierung des Endger\u00e4tes L\u00f6sung Aufbau der CSS-Datei: @media (min-width: 950px) { \/* Hohe Aufl\u00f6sung *\/ } &hellip; <a href=\"https:\/\/www.capri-soft.de\/blog\/?p=317\" class=\"more-link\"><span class=\"screen-reader-text\">Responsive Design \/ Layoutgestaltung f\u00fcr jede Bildschirmaufl\u00f6sung<\/span> weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[14],"tags":[],"class_list":["post-317","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4yGeN-57","jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=317"}],"version-history":[{"count":3,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/317\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=\/wp\/v2\/posts\/317\/revisions\/320"}],"wp:attachment":[{"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capri-soft.de\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}