Working with a responsive framework such as Bootstrap, you build websites to display differently depending on the screen size. Bootstrap defines four screen widths that determine what “mode” you are in (xs, sm, md and lg). But it’s not always obvious what mode you are viewing. For this I put together a small piece of CSS that can be dropped into any project during development. It will display a label in the top left corner that shows the mode you are currently viewing. Here is a demo. Resize the window to see the label change!
This is the CSS. The screen sizes are based on Bootstrap 3 but can easily be changes to any kind of framework.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
body::before { content: "X-SMALL"; position: absolute; top: 0; left: 0; background-color: #fff; color: #000; font-weight: bold; padding: 4px 6px 2px 6px; border: 1px solid #d3d3d3; z-index: 10000; } @media (min-width: 480px) { /* @screen-xs */ body::before { content: "SMALL"; background-color: #fbf; } } @media (min-width: 768px) { /* @screen-sm */ body::before { content: "MEDIUM"; background-color: #bbf; } } @media (min-width: 992px) { /* @screen-md */ body::before { content: "LARGE"; background-color: #bfb; } } @media (min-width: 1200px) { /* @screen-lg */ body::before { content: "X-LARGE"; background-color: #fbb; } } |
Note: The screen widths above are hard coded pixel sizes, so this CSS does not depend on any framework. To the right of each @media I have written the corresponsing Bootstrap LESS variable (@screen-xx). Replace the ###px with the variable to make sure it is always correct.
