Media Queries in CSS

#css #html #webdev #beginners

Media queries are one of the main source behind our trending moderns websites. It is use to create responsive websites.
Responsive That websites adjust in all media screens, Mobiles screens Tablets iPad tv desktops etc.
As we know @Media is one of the most powerful property in css. This property use with Three main parameters
1 Print in this parameter
When someone want to take print of our website or specific Area when this media query apply
For Example: without CSS media query print is like that 👇

than we applied sab media querry on body

@media print{
    *{
        color: blue;
    }
}

after that the result of prink is like that 👇

2 Speak Speak media query is not have a common use in all websites it is mostly used accessible website for all blinds & eye sight weak people. In this developers do some JavaScript with the help of JavaScript website content read automatically in voice as blind people can easily understand.

3 Screen This media is commonly use in all websites today era, by the help of screen media query we can create responsive website.
Responsive Means fit in all screen types laptops, mobiles, desktops tv and other large screen.
In this developer use Hight width of different devices and than style web page according to width & height,

 @media screen and (max-width: 480px){
     .container{
        margin: 2rem;
        padding: 4rem;
        background: rgba(220, 67, 98, 0.277);
     }
     .container h1{
        font-size: 2rem;
     }
 }

In upper given code max-width defines mobiles devices.

and tablets are

 @media screen and (min-width: 481px) and (max-width:768px){
     .container{
        margin: 2rem;
        padding: 4rem;
        background: rgba(133, 67, 220, 0.277);
     }
     .container h1{
        font-size: 2.5rem;
     }
 }

this one is styling for tablets

some useful breakpoints are

↪ 320px --- 480px Mobile devices
↪ 481px --- 768px iPads Tablets
↪ 769px --- 1024px small screen laptops
↪ 1025px --- 1200px Desktops large Screens
↪ 1201px --- and more Extra large screens Tv etc.