li mitskalieren

[burn4ever]

Hallo,
ich habe in eine Liste wo jedes li eine andere Farbe in Formeine Quadrates darstellt.
Nun möchte ich das beim kleiner skalieren der Liste die Quadrate nicht umbrechen sondern sich proportional mitskalieren.

Mein Code:

                <ul>
                    <li data-color="red"></li>
                    <li data-color="blue"></li>
                    <li data-color="green"></li>
                    <li data-color="black"></li>
                    <li data-color="yellow"></li>
                    <li data-color="pink"></li>
                </ul>

CSS (Sass):

ul {

        width: 100%;

        li {
            display: inline-block;
            width: 22px;
            height: 22px;
            background-color: red;
            margin-left: 10px;

            &:first-child {
                margin-left: 0;
            }
        }
    }

Weiss gerade nicht wie ich das css für die li's anpassen muss damit diesen sich mitskalieren und nicht umbrechen.

Im Prinzip so was nur mit Quadraten:
http://skinnyties.com/color/

 

[Tronjer]

Media Queries.