Unser 3 Purpose Grid hatten wir in Teil 1 dieser Reihe rein statisch entwickelt. Wir werden es in diesem Beitrag durch Hinzufügen einer einzigen CSS-Datei responsive machen.
Außerdem werden wir bei dieser Gelegenheit ein kleines Javascript hinzufügen, mit dem wir unser Responsive-Layout ganz gut testen können.
Das Ergebnis kann man in dieser Demo bewundern.
Wir fügen folgende Datei dem CSS-Ordner unseres Grid-Systems aus Teil 1 hinzu:
/**
* Resonsive Design
*/
/**
* Very large desktop
*/
/* Responsive test message (actual width and height) */
.rtest {
min-width: 100%;
min-height: 20px;
text-align: center;
background-color: #aaaaaa;
color: #000000;
padding:0;
}
/**
* Large desktop
*/
@media (max-width: 1199px) {
.rtest {
background-color: yellow;
}
}
/**
* Portrait tablet to landscape and desktop
*/
@media (max-width: 991px) {
.rtest {
background-color: red;
color:white;
}
}
/**
* Eliminate 'white space' around page content
*/
@media (max-width: 910px) {
.rtest {
background-color: cyan;
color:black;
}
.body-layer {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-top: 0px;
margin-bottom: 0px;
max-width:100%;
box-shadow:none;
}
header {
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
border-top-right-radius: 0;
}
footer {
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0;
}
/* min-width: override 855px */
header, main, footer {
min-width: 0px;
}
.body-layer {
background-size: 100% auto;
}
.col1 {
width: 33.333%;
}
.col2 {
width: 66.666%;
}
.col3{
width: 100%;
}
}
/**
* We cross the border of 855px width of the static theme now.
*/
@media (max-width: 854px) {
.rtest {
background-color: darkorange;
color: black;
}
/* See: header-contrib-var-x.y.css */
}
/**
* Landscape phone to portrait tablet.
* We change the navigation to a collapsing menu button
* typical for mobile devices.
*/
@media (max-width: 767px) {
.rtest {
background-color: blue;
color:white;
}
/* See: respNav.css */
/* See: header-contrib-var-x.y.css */
/* See: node.css */
/* See: footer-contrib-var-x.y.css */
}
/**
* For some landscape phones, e.g. Samsung 8500i
*
* Resize all content to 100 Percent.
*
* Off topic hint:
* Some small mobile phones run into problems on the change-orientation event
* if a table structure has to be reorganized. So change table structure
* only if the device-width is big enough, e.g. here
*
*/
@media (max-width: 600px) {
.rtest {
background-color: white;
color:black;
}
main .col1, main .col2 {
width: 100%;
}
.col-image {
min-width:100%;
margin: 0;
margin-bottom:10px;
}
/* See: header-contrib-var-x.y.css */
/* See: node.css */
}
/**
* Landscape phones and down
*/
@media (max-width: 480px) {
.rtest {
background-color: green;
color:white;
}
.two-columns .col1 {
width: 100%;
}
.container {
padding-left:0;
padding-right:0;
}
/* See: footer-contrib-var-x.y.css */
}
/**
* Old feature phones or similar
*/
@media (max-width: 366px) {
.rtest {
background-color: cyan;
color:black;
}
/* See: pagination.css */
}
/* e.g. Samsung 85008i max. width: 240 px */
@media (max-width: 300px) {
.rtest {
background-color: maroon;
color:white;
}
/* See: footer-contrib-var-x.y.css */
/* See: pagination.css */
}3-Purpose-Grid - File: assets/css/resp-855-whr-nrw-var-1-vers-0.5.0.css
Man erkennt ein Reihe von Media-Queries für unterschiedliche Breiten eines mobilen Endgerätes.
Über die Einteilung kann man streiten, aber für mich stellen die dort definierten Bereiche meine Best Practice dar.
Meiner Meinung nach sollte man sich grundsätzlich entscheiden, ob man mit max-width-Definitionen arbeitet oder mit min-width. Ich habe mich an max-width gewöhnt. In gewissem Sinne widerspricht das der häufig empfohlenen Philosophie Mobile first.
Aber bei dem in diesem Blog verfolgten Ansatz ist Mobile first nur in bestimmten Testphasen relevant. In der Regel werden die meisten Web-Worker irgendwie iterativ vorgehen, zumal man sich zu Beginn eines Projekts darüber klar werden muss, mit welchen GUI-Elementen man arbeiten will.
Große Desktops ermöglichen mehr und andere GUI-Elemente. Man wird also nicht um Überlegungen zum "großen" Desktop-Layout zu Beginn eines Projekts herumkommen. Ich persönlich finde es dann anschaulicher, bei der Festlegung der Grenzen von groß nach klein zu gehen. Aber das ist - denke ich - Geschmackssache. Nur sollte man sich auf jeden Fall an eine Richtung halten, denn sonst wird es bei zunehmender Komplexität des Projekts unübersichtlich.
Ein kleines Test-Feature für responsive Seiten
Zunächst einmal zeigen die Farben am oberen Rand des Layouts einen Wechsel des Media-Queries-Bereichs an. Dies wird erreicht, indem für jeden Bereich eine Regel für ein im Layout enthaltenes div-Tag der Klasse rtest mit background- und color-Eigenschaft angegeben wird.
Um den Komfort noch zu erhöhen, kann man folgendes jQuery-Snippet hinzufügen:
"use strict";
/*
* Responsive test
*
* The actual device-width will be displayed into a div-tag with id='rtest'
*
*/
$(document).ready(function() {
/* For responsive test only */
if (document.getElementById('rtest')) {
window.onload = window.onresize = function (evt) {
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
document.getElementById('rtest').innerHTML = width + '/' + height;
};
}
});Diese kleine Skriptchen fügen wir in unsere Dateistruktur unter assets\js\rtest.js ein.
Wie man sieht, benötigen wir außerdem eine jQuery-Version die wir uns herunterladen und unter assets\js\libs\jquery\jquery-1.11.2.min.js speichern.
Wir fügen dann in unsere index_resp.html-Datei noch folgende Zeilen ein:
....
<head>
...
<!-- Responsive -->
<link href="./assets/css/resp-855-whr-nrw-var-1-vers-0.5.0.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<!-- Scripts -->
<script type="text/javascript" src="assets/js/libs/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./assets/js/rtest.js"></script>
</body>
Das ist alles.
Ausschließlich durch Hinzufügen einer weiteren CSS-Datei und eines kleinen Test-Skripts (das nicht unbedingt erforderlich ist) haben wir unser Grid-System aus Teil 1 responsive gemacht.