CSS Media Queries

CSS Media Query

First of all, I want to tell you that what is media query, and what is the use of it. let's begin, To make our web page responsive is main aim of this property. After hearing the term responsive first thing which comes in our mind is fast, immediate, speed. but it is not like that , it is totally different from that.

Let's discuss what is responsive ?

Responsive means to make our web-page look good enough in different screen size. means how should it look in PC, Tablet, and Mobile. this three are the standard screen sizes. since the web page are introduce, responsive is not that important because at that time most of the surfing/ searching are done through computer itself. but now a days responsive web page are mandatory. because now most of the surfing/ searching are done through mobile and tablet as compare to computer and laptop. because their user's are increasing day by day.

let's discus how we will write code for this

/* When the browser is at least 501px and at max 766px */

@media screen and (min-width:501px) and (max-width:766px) {
  .element {
    /* Apply some styles */
  background-color:red;
  display:flex;
  flex-direction:column;
  align-item:center;
  justify-content:center;
  }

the above code is written for the screen size in between 501px to 766px.

• step1-first we have to write At-Rule means @media.

• step2-write media type in this example media type is screen.

• step3-write media feature means at what situation this media query get activated in this example media feature is (min-width:501px) , (max-width:766px)

• step4-write operator if their is more than one feature like above example we write and operator .

• step5-write all the CSS properties which you want to apply.

i want to change background color to red.

display should be flex.

flex-direction should be column.

and arrange all the item at center of the page.

that's the basic idea about media query and its working.