/* CSS fuer Sossen.nl */
/*
1) Grid container - Parent element that hold all the grid items. Grid container define template area of how many rows and columns would be there. It also define size of grid cell.
There are multiple CSS properties available for grid container, few of them are use as a shorthand.
But the three important CSS instructions given to the browser are
a) Element is a grid container.
b) Total numbers of rows and columns are in the grid.
c) Area cover for each grid cell.
display: grid | inline-grid
grid-template-rows: px, fr, em, auto, %, minmax(), repeat()
grid-template-columns: px, fr, em, auto, %, minmax(), repeat()
2) Grid items - Child elements that inside the grid container called grid items.
Similarly grid item has CSS properties to fit itself into the grid cell.
Responsive Grid
To make a responsive grid, you can use fraction(fr), percent(%), auto units in the grid-template.
Other responsive option is to use @media query and redefine grid-template for multiple device breakpoints
.angry-grid {
display: grid;
grid-template-rows: 4rem auto 45px;
grid-template-columns: 16rem auto;
grid-template-areas:
'logo header'
'sidebar main-content'
'sidebar footer';
}
@media (max-width: 767px){
.angry-grid {
grid-template-rows: 4rem auto auto 45px;
grid-template-columns: 16rem auto;
grid-template-areas:
'logo header'
'sidebar sidebar'
'main-content main-content';
'footer footer';
}
}
In der heutigen, digital vernetzten Welt ist das Internet fester Bestandteil unseres Alltags.
Die zunehmende Anzahl verschiedener Geräte und Bildschirmgrößen stellt Webdesigner und Entwickler jedoch vor
die Herausforderung, Websites so zu gestalten, dass sie auf allen Geräten optimal dargestellt werden.
In diesem Blogartikel werfen wir einen Blick auf das Responsive Design und die gängigsten
Bildschirmauflösungen hier bei uns in Deutschland.
Responsive Design ist ein Ansatz im Webdesign, bei dem eine Website so entwickelt wird,
dass sie sich automatisch an die Bildschirmgröße und -auflösung des Endgeräts anpasst,
auf dem sie angezeigt wird. Dies wird erreicht, indem flexible Layouts, Bilder und CSS-Medienabfragen
verwendet werden, um die Darstellung der Seite entsprechend der Eigenschaften des
betrachteten Geräts zu ändern.
Die gängigsten Bildschirmauflösungen in Deutschland variieren, abhängig von den verwendeten Geräten.
Laut Google sind die häufigsten Auflösungen auf Desktop-Computern 1920×1080, 1366×768 und 1440×900.
Bei Laptops sind es 1280×800, 1366×768 und 1440×900. Bei Tablets sind die üblichen
Auflösungen 768×1024, 800×1280 und 1280×800. Bei Smartphones hingegen dominieren 360×640, 375×667 und
414×896.
Um eine Website für diese verschiedenen Auflösungen zu optimieren, müssen Designer und Entwickler
einige grundlegende Prinzipien des Responsiven Designs beachten. Dazu gehören:
Fluid Grids: Die Verwendung von flexiblen, prozentualen Einheiten für Layouts statt fixer Pixelwerte
ermöglicht eine dynamische Anpassung an unterschiedliche Bildschirmgrößen.
(Das Bild für diesen Beitrag soll das „Barrierefreie Anzeige“ verdeutlichen)
Flexible Bilder: Bilder sollten so eingestellt werden, dass sie ihre Größe automatisch anpassen und nicht
über den Container hinausragen, in dem sie angezeigt werden.
Medienabfragen: Mit CSS-Medienabfragen können unterschiedliche Stile für verschiedene Bildschirmgrößen
und -auflösungen angewendet werden. Dies ermöglicht eine präzise Anpassung der Darstellung an die
jeweilige Bildschirmgröße.
Responsive Navigation: Die Navigation ist ein entscheidender Aspekt jeder Website oder Onlineshops.
Bei responsiven Designs sollte die Navigation so gestaltet werden, dass sie auf kleineren Bildschirmen,
wie Smartphones und Tablets, leicht zugänglich und benutzerfreundlich ist. Hierzu können
beispielsweise mobile Menüs (auch als „Hamburger-Menüs“ bekannt) oder Dropdown-Menüs verwendet werden,
die sich bei Bedarf ein- und ausklappen lassen.
Performance-Optimierung: Die Ladezeiten einer Website sind für die Benutzererfahrung und
die Suchmaschinenoptimierung (SEO) von entscheidender Bedeutung. Bei responsiven Designs ist es wichtig,
die Größe von Dateien wie Bildern und Skripten zu minimieren und den Code effizient zu gestalten,
um eine schnelle Ladezeit auf allen Geräten zu gewährleisten. Techniken wie das Lazy Loading von Bildern
oder die Verwendung von Content Delivery Networks (CDNs) können dazu beitragen, die Performance zu verbessern.
Hierbei müssen wir auf die neue DSGVO hinweisen, nicht jedes CDN ist derzeit DSGVO-konform.
*/
/*
https://www.mediaevent.de/css/media-queries.html
*/
/*
p {
font-size: 12px;
}
@media screen and (max-width: 500px) {
p {
font-size: 14px;
}
}
*/
/* ------------------------------- */
/*
responsible rules start
Desktop 1920 * 1080
Laptop 1280 * 800
Tablet 800 * 1280
Smartphone 375 * 667
*/
p {
font-size: 14px;
/* 1em entspricht immer dem default font-size px-wert */
/* gibt man die CSS-werte in em an, und modifiziert man nun die px-werte per mediaquery */
/* wird die gesamte Darstellung automatisch an die viewpoint grösse angepasst, super */
}
@media screen and (max-width: 500px) {
p {
font-size: 15px;
}
}
@media screen and (max-width: 850px) {
p {
font-size: 17px;
}
}
@media screen and (max-width: 1300px) {
p {
font-size: 18px;
}
}
/*
responsible rules stop
*/
img {
max-width: 100%; /* respons image */
height: auto;
}
.grid {
display: grid;
height: 900px;
grid-template-rows: 300px 1fr 2fr;
gap: 15px;
}
/* Sossen mit Grid ******************************************************************************* */
.welcome-1 { /* parents */
display: grid;
grid-template-columns: repeat(8, 10%); /* 8 Spalten */
grid-template-rows: 300px 1fr 1fr 1fr 1fr; /* 5 Zeilen */
grid-row-gap: 3em;
grid-column-gap: 0px;
justify-items: stretch;
align-items: stretch;
/*
background-image: url("/images/thermo_4.jpg");
background-attachment: fixed;
background-position: right;
background-repeat: no-repeat;
background-size: auto;
*/
padding-top: 3em;
}
.welcome-11 { /* children */
background-color: rgba(230, 230,230, 0.7);
grid-row-start: 1; /* beginnt in Zeile 1 */
grid-column-start: 1; /* beginnt in Spalte 1 */
grid-row-end: 2; /* endet VOR Zeile 2 */
grid-column-end: 6; /* endet VOR Spalte 7 */
border: 1px black solid;
padding: 1em;
}
.welcome-13 {
display: grid;
background-color: rgba(0,255,0, 0.7);
grid-template-columns: subgrid;
grid-template-rows: subgrid;
border: 1px black solid;
padding: 1em;
}
.welcome-12 {
background-color: rgba(230,230,230, 0.7);
grid-row-start: 1;
grid-column-start: 6;
grid-row-end: 2;
grid-column-end: 10;
border: 1px black solid;
padding: 1em;
}
.welcome-14 {
background-color: rgba(230,230,230, 0.7);
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 7;
border: 1px black solid;
padding: 1em;
}
.welcome-15 {
background-color: rgba(230,230,230, 0.7);
grid-row-start: 3;
grid-column-start: 3;
grid-row-end: 4;
grid-column-end: 8;
border: 1px black solid;
padding: 1em;
}
.welcome-16 {
background-color: rgba(230,230,230, 0.7);
grid-row-start: 4;
grid-column-start: 1;
grid-row-end: 5;
grid-column-end: 9;
border: 1px black solid;
padding: 1em;
}
.welcome-17 {
background-color: rgba(230,230,230, 0.7);
grid-row-start: 5;
grid-column-start: 2;
grid-row-end: 6;
grid-column-end: 10;
border: 1px black solid;
padding: 1em;
}