Responsive Web Design with CSS Media Queries.

Responsive Web Design with CSS Media Queries.

Whats responsive web design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones). (Quoted from W3Schools)

QUICK START GUIDE

We assume that you have an HTML template thats not responsive at all, so we will break things down. As you are reading this, i am quite sure that you have knowledge of CSS/HTML and you know how to work around with different DOM elements.

First of all open up your HTML document in any of your favorite editor, i would recommend Visual Studio Code .

 

Once you have opened your HTML file add the following code to your head tags.

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

 

Breaking things down. “ViewPort” actually tells the browser to how much width the website should be, in this case we are telling the browser to keep the website or resize its content to the width of the browser, and user-scalable=no defines that the website shouldn’t sketch once its loaded to the limits of the browser’s width.

 

Media queries in css3

Moving on to the CSS file, open up your CSS file  and add the following code.

@media screen and (min-width: 769px) {
    /* STYLES for minimum 769px width screens will go HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES with minimum 481px and maximum 768px width will go HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES with max-width upto 480px will go HERE */
}

As you can see the comments above in the CSS code. We are defining the styles from our side. It can be a pain to convert a plain HTML file sometimes, but nowadays there are quite good HTML5 frameworks with boilerplate’s available and are handy to use.

All your CSS code in the above block will work once you resize the browser and the website will adapt to the screen size and take the styles accordingly.

I will discuss more on this topic in my future posts.

As rated by readers
[Total: 0 Average: 0]
0

Related Posts

Leave a Reply

avatar
  Subscribe  
Notify of