Responsive Design: neue Media Query

pointer: fine / pointer: coarse

Media Queries prüfen die Eigenschaften von Ausgabegeräten und passen damit CSS-Regeln dynamisch an. Sie legen fest, wie ein Dokument auf verschiedenen Bildschirmen erscheint. Die Anpassung erfolgt durch Bedingungen wie den Medientyp, die Display-Ausrichtung oder die Bildschirmauflösung.

CSS3 bietet eine neue Option zur geräteabhängigen Gestaltung von Webseitenelementen:

CSS
pointer: fine;

		pointer: coarse;

Touch-Geräte besitzen die Eigenschaft pointer: coarse. Dies zeigt an, dass sie einen ungenauen Zeiger nutzen. Maus und Touchpad haben die Eigenschaft pointer: fine. Sie bieten eine präzisere Steuerung.

Diese Eigenschaften ermöglichen eine simple Unterscheidung zwischen Desktop und Mobilgeräten. Die neue Media Query kann die alten bildschirmgrößenbasierten Abfragen teilweise ersetzen. Entwickler können responsives Design dadurch deutlich einfacher umsetzen.Das ist ein Absatz, sichtbar auf Geräten mit pointer: fine

Das ist ein Absatz, sichtbar auf Geräten mit pointer: fine

CSS:
@media screen and (pointer: fine) {

			    p.touch {

			        display: none;

			    }

			    p.desktop {

			        display: inline-block;

			    }

			}

Das ist ein Absatz, sichtbar auf Geräten mit pointer: coarse

CSS:
@media screen and (pointer: coarse) {

			    p.touch {

			        display: inline-block;

			    }

			    p.desktop {

			        display: none;

			    }

			}

Letzte Änderung am 15.06.2025

↑