Viewport meta tags vs Media Queries?

Question

I would love to know, to optimize your website for Tablets, desktops and smarthpones, what is best to use: Media Queries or the Viewport meta tags? see code:

Answer 1

@Media Query use to Response our web site for other devices.
For example this query only works for devices with min 768px width and devices with max 1024px.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
} 

What is a Media Query? It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Example If the browser window is 600px or smaller, the background color will be lightblue:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

What is the Meta View port???

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

This was not perfect!! But a quick fix.

I hope this may help you to understand about meta viewport and @Media query.