A complete media query framework for CSS, to apply specific properties in specific screen

  • By Rohit Chouhan
  • Last update: Aug 23, 2022
  • Comments: 0

A complete media query framework for CSS, to apply specific properties in specific screen
Note: Size of every media query is `50px, 100px, 150px, 200px, 250px ....... 2500px`



This is all-in-one CSS, its may make your site slow, We recommanded to use single css for each class. see below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rohit-chouhan/screen.css/dist/screen.css" type="text/css"/>

For Single

screen-max-show-hide.css, screen-min-show-hide.css, screen-max-color.css,screen-min-color.css,screen-max-font-size.css, screen-min-font-size.css, screen-max-height-width.css, screen-min-height-width.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rohit-chouhan/screen.css/dist/<css-file-here>" type="text/css"/>


Always use type with dash scope (max or min) in the last of class with size, -max300, -min600.

<!-- example for max -->
<!-- example for min -->

Classes for Hide & 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 denotes 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


In the first version this framework is only have classes for show & hide, font-color, font-size, height, width, background, text-align, align-contents, align-items.

Create an issue if you want more feature or any property, thank you.

Created by Rohit Chouhan