{"id":154,"date":"2013-04-18T22:19:58","date_gmt":"2013-04-18T20:19:58","guid":{"rendered":"http:\/\/paulchrablass.de\/blog\/?p=154"},"modified":"2013-04-18T22:21:07","modified_gmt":"2013-04-18T20:21:07","slug":"pixelmasse-der-fixen-bootstrap-rastereinheiten-in-den-verschiedenen-viewportgroessen","status":"publish","type":"post","link":"https:\/\/paulchr.ablass.me\/blog\/2013\/04\/18\/pixelmasse-der-fixen-bootstrap-rastereinheiten-in-den-verschiedenen-viewportgroessen\/","title":{"rendered":"Pixelma\u00dfe der fixen Bootstrap-Rastereinheiten in den verschiedenen Viewportgr\u00f6\u00dfen"},"content":{"rendered":"

Die folgenden Werte beziehen sich auf das responsive default grid<\/strong> in Bootstrap<\/a> (Version 2.3.1)<\/p>\n

Bis 767px Viewportbreite<\/h3>\n
    \n
  • Linearisierte Darstellung<\/li>\n
  • Body: jeweils 20px Abstand zu beiden Seiten<\/li>\n
  • Seite ist fluid<\/li>\n<\/ul>\n

    Ab 768 – 979px Viewportbreite<\/h3>\n
      \n
    • Seitenbreite: 724px<\/li>\n
    • Abstand zwischen Grid-Units: 20px<\/li>\n<\/ul>\n

      Grid<\/h4>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      Gridunit<\/th>\nPixelbreite<\/th>\n<\/tr>\n<\/thead>\n
      1\/12<\/td>\n42px<\/td>\n<\/tr>\n
      2\/12<\/td>\n104px<\/td>\n<\/tr>\n
      3\/12<\/td>\n166px<\/td>\n<\/tr>\n
      4\/12<\/td>\n228px<\/td>\n<\/tr>\n
      5\/12<\/td>\n290px<\/td>\n<\/tr>\n
      6\/12<\/td>\n352px<\/td>\n<\/tr>\n
      7\/12<\/td>\n414px<\/td>\n<\/tr>\n
      8\/12<\/td>\n476px<\/td>\n<\/tr>\n
      9\/12<\/td>\n538px<\/td>\n<\/tr>\n
      10\/12<\/td>\n600px<\/td>\n<\/tr>\n
      11\/12<\/td>\n662px<\/td>\n<\/tr>\n
      12\/12<\/td>\n724px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      <\/p>\n

      Ab 980 – 1199px Viewportbreite<\/h3>\n
        \n
      • Seitenbreite: 940px<\/li>\n
      • Abstand zwischen Grid-Units: 20px<\/li>\n<\/ul>\n

        Grid<\/h4>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
        Gridunit<\/th>\nPixelbreite<\/th>\n<\/tr>\n<\/thead>\n
        1\/12<\/td>\n60px<\/td>\n<\/tr>\n
        2\/12<\/td>\n140px<\/td>\n<\/tr>\n
        3\/12<\/td>\n220px<\/td>\n<\/tr>\n
        4\/12<\/td>\n300px<\/td>\n<\/tr>\n
        5\/12<\/td>\n380px<\/td>\n<\/tr>\n
        6\/12<\/td>\n460px<\/td>\n<\/tr>\n
        7\/12<\/td>\n540px<\/td>\n<\/tr>\n
        8\/12<\/td>\n620px<\/td>\n<\/tr>\n
        9\/12<\/td>\n700px<\/td>\n<\/tr>\n
        10\/12<\/td>\n780px<\/td>\n<\/tr>\n
        11\/12<\/td>\n860px<\/td>\n<\/tr>\n
        12\/12<\/td>\n940px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        Ab 1170px Viewportbreite<\/h3>\n
          \n
        • Seitenbreite: 1170px<\/li>\n
        • Abstand zwischen Grid-Units: 30px<\/li>\n<\/ul>\n

          Grid<\/h4>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
          Gridunit<\/th>\nPixelbreite<\/th>\n<\/tr>\n<\/thead>\n
          1\/12<\/td>\n70px<\/td>\n<\/tr>\n
          2\/12<\/td>\n170px<\/td>\n<\/tr>\n
          3\/12<\/td>\n270px<\/td>\n<\/tr>\n
          4\/12<\/td>\n370px<\/td>\n<\/tr>\n
          5\/12<\/td>\n470px<\/td>\n<\/tr>\n
          6\/12<\/td>\n570px<\/td>\n<\/tr>\n
          7\/12<\/td>\n670px<\/td>\n<\/tr>\n
          8\/12<\/td>\n770px<\/td>\n<\/tr>\n
          9\/12<\/td>\n870px<\/td>\n<\/tr>\n
          10\/12<\/td>\n970px<\/td>\n<\/tr>\n
          11\/12<\/td>\n1070px<\/td>\n<\/tr>\n
          12\/12<\/td>\n1170px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

          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 – 979px Viewportbreite Seitenbreite: 724px Abstand zwischen Grid-Units: 20px Grid Gridunit Pixelbreite 1\/12 42px 2\/12 104px 3\/12 166px 4\/12 228px 5\/12 290px 6\/12 352px […]<\/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":[84],"tags":[85,86],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2Vohc-2u","jetpack-related-posts":[{"id":297,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/05\/26\/sass-mixin-rem-mit-px-fallback\/","url_meta":{"origin":154,"position":0},"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 "Css"","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":154,"position":1},"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 "Browser"","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":[]},{"id":166,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/17\/uebersicht-ueber-verschiedene-fachbegriffe-aus-dem-bereich-retina-display-optimierung\/","url_meta":{"origin":154,"position":2},"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 "Css"","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":154,"position":3},"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 "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":153,"url":"https:\/\/paulchr.ablass.me\/blog\/2013\/03\/18\/mit-mediaqueries-auf-verschiedene-pixeldichten-reagieren\/","url_meta":{"origin":154,"position":4},"title":"Mit Mediaqueries auf verschiedene Pixeldichten reagieren","author":"Paul-Christian Abla\u00df","date":"18. M\u00e4rz 2013","format":false,"excerpt":"Um Websites f\u00fcr Endger\u00e4te mit unterschiedlicher Pixeldichte bzw. device pixel ratio zu optimieren, eignet sich der resolution\u2013Mediaquery 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\u2026","rel":"","context":"In "Css"","block_context":{"text":"Css","link":"https:\/\/paulchr.ablass.me\/blog\/themen\/css\/"},"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":154,"position":5},"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 "Browser"","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":[]}],"_links":{"self":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/154"}],"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=154"}],"version-history":[{"count":5,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/posts\/154\/revisions\/278"}],"wp:attachment":[{"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/paulchr.ablass.me\/blog\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}