Beispiel für die Verwendung von @media responsive CSS zur Anpassung an verschiedene Bildschirme

@media screen und (min-width:1000px) und (max-width: 1200px) {
    .cont_li{
        Breite: 50px;
        Rand links: 7px;
        Polsterung links: 9px;
    }
}

@media (min-width: 1200) { //> = 1200 Geräte}
@media (Mindestbreite: 992px) { //> = 992 Geräte}
@media (Mindestbreite: 768px) { //> = 768 Geräte}

@media (Mindestbreite: 768px) { //> = 768 Geräte}
@media (Mindestbreite: 992px) { //> = 992 Geräte}
@media (min-width: 1200) { //> = 1200 Geräte}

@media (maximale Breite: 1199) { //<=1199 Geräte}
@media (maximale Breite: 991px) { //<=991 Geräte}
@media (maximale Breite: 767px) { //<=768 Geräte}

/*Wird ausgeführt, wenn die Seitenbreite größer als 1000 Pixel und kleiner als 1200 Pixel ist, 1000-1200*/
@media screen und (min-width:1000px) und (max-width: 1200px) {
    Körper{
        Schriftgröße: 16px
    }
}
/*Ausführen, wenn die Seitenbreite größer als 1280 Pixel und kleiner als 1366 Pixel ist, 1280-1366*/
@media screen und (min-width:1280px) und (max-width: 1366px) {
    Körper{
        Schriftgröße: 18px
    }
}
/*Ausführen, wenn die Seitenbreite größer als 1440 Pixel und kleiner als 1600 Pixel ist, 1440-1600*/
@media screen und (min-width:1440px) und (max-width:1600px) {
    Körper{
        Schriftgröße: 20px
    }
}
/*Ausführen, wenn die Seitenbreite größer als 1680 Pixel und kleiner als 1920 Pixel ist, 1680-1920*/
@media screen und (min-width:1680px) und (max-width:1920px) {
    Körper{
        Schriftgröße: 22px
    }
}

html{ Schriftgröße:16px;}

@media-Bildschirm und (Mindestbreite: 320px) {html{Schriftgröße:50px;}}
@media-Bildschirm und (Mindestbreite: 360px) {html{Schriftgröße:56,25px;}}
@media-Bildschirm und (min-width: 375px) {html{font-size:58.59375px;}}
@media-Bildschirm und (Mindestbreite: 400px) {html{Schriftgröße:62,5px;}}
@media-Bildschirm und (Mindestbreite: 414px) {html{Schriftgröße:64.6875px;}}
@media-Bildschirm und (Mindestbreite: 440px) {html{Schriftgröße:68,75px;}}
@media-Bildschirm und (Mindestbreite: 480px) {html{Schriftgröße:75px;}}
@media-Bildschirm und (Mindestbreite: 520px) {html{Schriftgröße:81,25px;}}
@media-Bildschirm und (Mindestbreite: 560px) {html{Schriftgröße:87,5px;}}
@media-Bildschirm und (Mindestbreite: 600px) {html{Schriftgröße:93,75px;}}
@media-Bildschirm und (Mindestbreite: 640px) {html{Schriftgröße:100px;}}
@media-Bildschirm und (Mindestbreite: 680px) {html{Schriftgröße:106,25px;}}
@media-Bildschirm und (Mindestbreite: 720px) {html{Schriftgröße:112,5px;}}
@media-Bildschirm und (Mindestbreite: 760px) {html{Schriftgröße:118,75px;}}
@media-Bildschirm und (Mindestbreite: 800px) {html{Schriftgröße:125px;}}
@media-Bildschirm und (Mindestbreite: 960px) {html{Schriftgröße:150px;}}

@media screen und (min-width:320px) und (max-width:360px) {
    Körper{
        Schriftgröße: 12px;
    }
}
@media screen und (min-width:360px) und (max-width:390px) {
    Körper{
        Schriftgröße: 13px;
    }
}
@media screen und (min-width:390px) und (max-width:460px) {
    Körper{
        Schriftgröße: 14px;
    }
}

@media screen und (min-width:320px) und (max-width:460px) {
    Körper{
        Schriftgröße: 12,5px;
    }
}