logbuch

Kategorie: Css

  • Pixelmaße der fixen Bootstrap-Rastereinheiten in den verschiedenen Viewportgrößen

    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 […]

  • Mit Mediaqueries auf verschiedene Pixeldichten reagieren

    Um Websites für Endgeräte mit unterschiedlicher Pixeldichte bzw. device pixel ratio zu optimieren, eignet sich der resolution–Mediaquery sehr gut: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {} Während -webkit-min-device-pixel-ratio das Verhältnis von Gerätepixeln zu geräteunabhängigen Pixeln abfragt, checkt min-resolution ob eine Punktdichte von mindestens 192dpi erreicht ist. In einer hoffentlich nicht […]

  • Übersicht über verschiedene Fachbegriffe aus dem Bereich Retina-Display-Optimierung

    Hier eine kurze Übersicht über die verschiedenen Fachbegriffe, ihre deutsche Übersetzung (so vorhanden) sowie eine kurze Erklärung. Englisch Deutsch Erklärung device pixels/ physcial pixels/ hardware pixels Gerätepixel/ physikalische Pixel Kleinste Darstellungseinheit auf dem Screen des Endgerätes und somit die Art von Pixel, die gemeint ist wenn es um die Auflösung (also z.B. 640 x 1136px […]

  • @font-face, SVG-Schriften und Fragmentbezeichner

    Um SVG-Schriften mittels der @font-face-Syntax einzubetten, wird bekanntlich folgendes Css benötigt: @font-face { font-family: „Open Sans Regular“; src: url(„../fonts/open-sans-regular/OpenSans-Regular-webfont.svg#OpenSansRegular“) format(„svg“); } Spannend ist der Fragmentbezeichner hinter dem Dateinamen, von mir fett hervorgehoben. Normalerweise sollte dieser nämlich in der Schriftdatei noch einmal auftauchen, nämlich als Attributwert für id innerhalb dieses XML-Snippets: <font id=“OpenSansRegular“ horiz-adv-x=“1171″> Tja. Normalerweise. […]

  • Responsive iframe- und video-Elemente

    Beim Einbetten von Videos innerhalb von iframe– oder video-Elementen in responsiven Websites gibt es in der Regel Probleme bei einer Größenveränderung ihres Containerelements. Obwohl die Breite des iframe’s mittels der Css-Eigenschaft max-width auf 100% gesetzt werden kann, ist davon nicht dessen Höhe betroffen. Um dieses Problem zu beheben, gibt es einen einfachen Trick: Um das […]