{"id":153,"date":"2013-03-18T22:39:39","date_gmt":"2013-03-18T21:39:39","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=153"},"modified":"2013-04-14T17:36:05","modified_gmt":"2013-04-14T15:36:05","slug":"mit-mediaqueries-auf-verschiedene-pixeldichten-reagieren","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/18\/mit-mediaqueries-auf-verschiedene-pixeldichten-reagieren\/","title":{"rendered":"Mit Mediaqueries auf verschiedene Pixeldichten reagieren"},"content":{"rendered":"<p>Um Websites f\u00fcr Endger\u00e4te mit unterschiedlicher Pixeldichte bzw. <em>device pixel ratio<\/em> zu optimieren, eignet sich der <em>resolution<\/em>&ndash;Mediaquery sehr gut:<\/p>\n<pre><code>@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {}<\/code><\/pre>\n<p>W\u00e4hrend <em>-webkit-min-device-pixel-ratio<\/em> das Verh\u00e4ltnis von Ger\u00e4tepixeln zu ger\u00e4teunabh\u00e4ngigen Pixeln abfragt, checkt <em>min-resolution<\/em> ob eine Punktdichte von mindestens 192dpi erreicht ist. In einer hoffentlich nicht allzu fernen Zukunft soll sogar nur noch die <em>device pixel ratio<\/em> mit der Ma\u00dfeinheit <em>dots per pixel<\/em> relevant sein- dann wird der Mediaquery so aussehen:<\/p>\n<pre><code>@media only screen and (min-resolution: 2dppx) {}<\/code><\/pre>\n<p>(Lies: Wenn 2 oder mehr Ger\u00e4tepixel auf ein ger\u00e4teunabh\u00e4ngiges Pixel kommen, dann&hellip;)<\/p>\n<h3>Links<\/h3>\n<p><a href=\"http:\/\/girliemac.com\/blog\/2012\/08\/03\/resolution-in-media-queries\/\">Resolution in Media Queries<\/a><br \/>\n<a href=\"http:\/\/www.w3.org\/TR\/css3-mediaqueries\/#resolution\">Media Queries<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um Websites f\u00fcr Endger\u00e4te mit unterschiedlicher Pixeldichte bzw. device pixel ratio zu optimieren, eignet sich der resolution&ndash;Mediaquery sehr gut: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {} W\u00e4hrend -webkit-min-device-pixel-ratio das Verh\u00e4ltnis von Ger\u00e4tepixeln zu ger\u00e4teunabh\u00e4ngigen Pixeln abfragt, checkt min-resolution ob eine Punktdichte von mindestens 192dpi erreicht ist. In einer hoffentlich nicht [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[77],"tags":[57,49,47,50,45,46,52,58,54,55,48],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-2t","jetpack-related-posts":[{"id":166,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/17\/uebersicht-ueber-verschiedene-fachbegriffe-aus-dem-bereich-retina-display-optimierung\/","url_meta":{"origin":153,"position":0},"title":"\u00dcbersicht \u00fcber verschiedene Fachbegriffe aus dem Bereich Retina-Display-Optimierung","author":"Paul-Christian Abla\u00df","date":"17. M\u00e4rz 2013","format":false,"excerpt":"Hier eine kurze \u00dcbersicht \u00fcber die verschiedenen Fachbegriffe, ihre deutsche \u00dcbersetzung (so vorhanden) sowie eine kurze Erkl\u00e4rung. Englisch Deutsch Erkl\u00e4rung device pixels\/ physcial pixels\/ hardware pixels Ger\u00e4tepixel\/ physikalische Pixel Kleinste Darstellungseinheit auf dem Screen des Endger\u00e4tes und somit die Art von Pixel, die gemeint ist wenn es um die Aufl\u00f6sung\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":535,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/02\/18\/color-stops-in-verlaeufen-an-der-selben-position-bei-unterschiedlich-hohen-elementen\/","url_meta":{"origin":153,"position":1},"title":"color stops in Verl\u00e4ufen an der selben Position bei unterschiedlich hohen Elementen","author":"Paul-Christian Abla\u00df","date":"18. Februar 2014","format":false,"excerpt":"Das Problem In einem aktuellen Projekt kann auf Unterseiten einer Website ein Hintergrundverlauf zugeschaltet werden, der von transparent zu schwarz \u00fcbergeht. Das ist erst einmal kein Problem, immerhin k\u00f6nnen mittlerweile sowohl kreisf\u00f6rmige als auch lineare Verl\u00e4ufe mit Css umgesetzt werden. Der Ultimate CSS Gradient Generator ist ein wunderbares Tool zur\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/04\/18\/pixelmasse-der-fixen-bootstrap-rastereinheiten-in-den-verschiedenen-viewportgroessen\/","url_meta":{"origin":153,"position":2},"title":"Pixelma\u00dfe der fixen Bootstrap-Rastereinheiten in den verschiedenen Viewportgr\u00f6\u00dfen","author":"Paul-Christian Abla\u00df","date":"18. April 2013","format":false,"excerpt":"Die folgenden Werte beziehen sich auf das responsive default grid in Bootstrap (Version 2.3.1) Bis 767px Viewportbreite Linearisierte Darstellung Body: jeweils 20px Abstand zu beiden Seiten Seite ist fluid Ab 768 \u2013 979px Viewportbreite Seitenbreite: 724px Abstand zwischen Grid-Units: 20px Grid Gridunit Pixelbreite 1\/12 42px 2\/12 104px 3\/12 166px 4\/12\u2026","rel":"","context":"In &quot;Frameworks&quot;","block_context":{"text":"Frameworks","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/frameworks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":492,"url":"https:\/\/paulchr.ablass.me\/blog\/2014\/01\/21\/schoeneres-subpixelrendering-in-chrome-bald-verfuegbar\/","url_meta":{"origin":153,"position":3},"title":"Sch\u00f6neres Subpixelrendering in Chrome bald verf\u00fcgbar","author":"Paul-Christian Abla\u00df","date":"21. Januar 2014","format":false,"excerpt":"In absehbarer Zeit wird einer der nervigsten Bugs im Chrome unter Windows verschwinden (Feuerwerk!): Das Schriftrendering wechselt in B\u00e4lde von GDI zu DirectWrite, womit fehlerhaft dargestellte Schriften wie im obigen Bild der Vergangenheit angeh\u00f6ren sollten. In der Chrome Canary (Version 34) mit den aktivierten Flags --enable-direct-write und --no-sandbox (mehr dazu\u2026","rel":"","context":"In &quot;Browser&quot;","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"Schriftrendering von Firefox (oberhalb der Linie) und Chrome (unterhalb der Linie) unter Windows","src":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/01\/schriftvergleich-firefox-chrome.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/01\/schriftvergleich-firefox-chrome.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/01\/schriftvergleich-firefox-chrome.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2014\/01\/schriftvergleich-firefox-chrome.png?resize=700%2C400 2x"},"classes":[]},{"id":297,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","url_meta":{"origin":153,"position":4},"title":"Sass-Mixin: rem mit px-Fallback","author":"Paul-Christian Abla\u00df","date":"26. Mai 2013","format":false,"excerpt":"Ich nutze im Css so gut wie ausschlie\u00dflich rem (siehe dazu auch CSS-Tipp: rem als Einheit f\u00fcr Schriftgr\u00f6\u00dfe nutzen) als Einheit und trug das ben\u00f6tigte Pixel-Fallback bisher h\u00e4ndisch ein. Mit der Zeit nervt das ziemlich, daher war ich sehr erfreut als ich vor kurzem das rem-Mixin f\u00fcr Sass von Hans\u2026","rel":"","context":"In &quot;Css&quot;","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":451,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/09\/28\/os-x-10-8-4-firefox-24-und-die-scrollbars-in-der-responsive-design-view\/","url_meta":{"origin":153,"position":5},"title":"OS X 10.8.4, Firefox 24 und die Scrollbars in der Responsive Design View","author":"Paul-Christian Abla\u00df","date":"28. September 2013","format":false,"excerpt":"Als ich am vergangenen Dienstag den frisch auf Version 24 aktualisierten Firefox benutze und mich daran machte, mein aktuelles Projekt in der Responsive Design View zu bearbeiten, wunderte ich mich etwas: Zuvor nebeneinander flie\u00dfende Elemente brachen mit einem Mal um. Beim Blick in das Layout-Fenster vom Firebug fiel mir auf,\u2026","rel":"","context":"In &quot;Browser&quot;","block_context":{"text":"Browser","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/browser\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/paulchr.ablass.me\/blog\/wp-content\/uploads\/2013\/09\/macosx-scrollbar-settings.png?fit=668%2C534&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/153"}],"collection":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":14,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/153\/revisions"}],"predecessor-version":[{"id":252,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/153\/revisions\/252"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}