Media queries which suits my all projects.

Writing design stylesheet including media for all devices and that too with minimum CSS code is always a challenge. Small width mobiles, Mobiles, Tablets, Tab Pro, Small desktop, laptop, Large desktop all are equally important as visitors are very well distributed over all devices. Web page design has to be made specific to the device width for better user experience.

What all things need to be considered while writing responsive CSS for a web site?

CSS stylesheet file size

Size of CSS file always need to be considered. Large CSS will slow down your pages. To cover all devices you can't just go on writing CSS specific to each device. At the end there will be lot of duplicate code. Media queries should be such that single line of code can serve multiple devices. It will also reduce your work and save your time.

CSS rendered on each page

In case a global stylesheet is used then you will have to load that large single CSS over each page even when design for that page might need 10-20% of designs. Best solution for that would be use component based framework like React JS or Web Component Where you can write designs specific to component.

All sized devices

First priority of frontend designer today is write designs for each devices available. Page layout and designs all need to specific to device. But that would end up in large stylesheet again.

Media queries that I came up while managing above points are -

Here I am taking example of common wrapper container class and will discuss how it's updated as required.

.app-wrap{
    max-width: 1542px;
}
.container{
    width: 82%;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

Your desktop specific designs here and they are also applicable to all devices sizes below, if no specific designs CSS is applied in their Media query section. Max width of web page is limited by .app-wrap container and it's a good to limit width as device width varies over wide range.

@media only screen and (max-width: 1024px) {
    .container{
        width: 94%;
    }
}

Tablet Pro specific designs. Check .container class, It has not given with any margins & Paddings so it will have it from CSS present above it, No duplication needed and as width specified as 94% it will be updated for all devices with max-width 1024px.

@media only screen and (max-width: 992px) {
    .container{
        width: 100%;
    }
}

Standard tablet sized specific CSS. Here we updated class .container width to 100%. Rest of the designs for .container will be using Table Pro and desktop designs.

@media only screen and (max-width: 767px) {
    .container{
        padding-left: 1em;
        padding-right: 1em;
    }
}

Mobile specific Designs. Consider same .container class where we are updating padding and it will be updated for all devices with size max-width 767px. Where it will have width and margin from styles written above.

@media only screen and (max-width: 364px) {
    .container{
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

Small size mobiles. Most often these devices sizes need minor updates over font sizes and padding margins, While most of it's styles can be used from designs written above this.

Sequence of styles matters a lot here. As we are only using max-width limits while writing these media queries, These styles becomes available over wide range of devices sizes. If you looking for mobile first design pattern you can reverse the media queries flow and you will write mobile designs without any media query and will go on writing media queries with min-width limits.

It saves my lots of time and save few lines of code too!