Screen CSS is a complete media query framework for CSS, to apply certain properties to a specific screen. The screen.css library provides a set of media query helpers to display, hide, colonize, position, and resize items based on screen size.
media query css, media query css for all devices, css media queries min and max, scss media query mixin, media query not working, bootstrap media queries
Note: The size of each media query is `50px, 100px, 150px, 200px, 250px…….2500px`.
How to make use of it:
1. To get began, include the screen.css stylesheet on the web page.
// All-in-one <link rel="stylesheet" href="dist/screen.css" /> // Or... <link rel="stylesheet" href="dist/screen-max-align.css" /> <link rel="stylesheet" href="dist/screen-min-align.css" /> <link rel="stylesheet" href="dist/screen-max-color.css" /> <link rel="stylesheet" href="dist/screen-min-color.css" /> <link rel="stylesheet" href="dist/screen-max-font-size.css" /> <link rel="stylesheet" href="dist/screen-min-font-size.css" /> <link rel="stylesheet" href="dist/screen-max-height-width.css" /> <link rel="stylesheet" href="dist/screen-min-height-width.css" /> <link rel="stylesheet" href="dist/screen-max-show-hide.css" /> <link rel="stylesheet" href="dist/screen-min-show-hide.css" />
2. Alignment content. The breakpoint might be 50, 100, 150, 200, or 250, …
<p class="text-align-left-min750">Resize The Window To See The Magic</p>
3. Set textual content & background colors. The breakpoint might be 50, 100, 150, 200, or 250, …
<p class="fcolor-red-min750">Resize The Window To See The Magic</p>
4. Adjust the font size. The breakpoint might be 50, 100, 150, 200, or 250, …
<p class="fsize-40-min750">Resize The Window To See The Magic</p>
5. Set the height/width of a block component. The breakpoint might be 50, 100, 150, 200, or 250, …
<div class="height-400-min750">Resize The Window To See The Magic</div>
6. Show/conceal your content. The breakpoint might be 50, 100, 150, 200, or 250, …
<p class="hide-min750">Resize The Window To See The Magic</p>
Classes for hiding & Show
| Class | Example | Description |
|---|---|---|
| hide-{type}{width} | hide-max600 | hide specific content |
| show-{type}{width} | show-min600 | show specific content |
Classes for Color
| Class | Example | Description |
|---|---|---|
| fcolor-{color} | fcolor-red-max400 | Color the font |
| bcolor-{color} | bcolor-red-max400 | Color on Background |
Classes for Size
All size will denote as pixel (px) only. font max size is 854px. height-width max size is 1193px.
| Class | Example | Description |
|---|---|---|
| fsize-{size} | fsize-20-max700 | Resize font |
| height-{size} | height-400-min400 | Resize Height of elements |
| weight-{size} | width-300-max400 | Resize Width of elements |
CSS Media Query Helpers, screen.css Plugin/Github, sass media query syntax, media query css for all devices with example
See Demo And Download
Official Website(rohit-chouhan): Click Here
This superior jQuery/javascript plugin is developed by rohit-chouhan. For extra Advanced usage, please go to the official website.
