Introduction to CSS Media Queries

Learning web development is a journey an aspiring software engineer should consider, it involves learning, self-motivation and access to a lot of online resources, it’s also good to have a mentor.

HTML & CSS is a great way to begin your web development journey but CSS media queries are like the icing on the cake referred to as the responsive web.

Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.

Responsive web design and CSS media queries work closely together.

CSS Media query

CSS media queries is a way of targeting devices, but it is helpful to know what the dimensions for all these devices are. They are the underlying theory of Responsive Design where we respond our content to fit any viewport.

Media queries are used together with flex box to create a responsive website. It is also used to change many things as listed below:

• the layout of a page depending on the orientation of the browser
• it helps in making images and typography responsive
• the width and height of the viewport and device.

A major component of responsive design is creating the right experience for the right device, with a gazillion different devices on the market, this can be a tall task.

There are various devices in the market as stated above, these means that using CSS media queries involves using different breakpoints. These breakpoints have different dimensions for different screen sizes.

Google defines breakpoints as the point at which the content of your site will respond to provide the user with the best possible layout to consume information.

For example, after designing a web page on a 17 inches laptop screen, without media queries the web page will not be user friendly on the mobile view for obvious reasons. It is pertinent for both web designers and developers, building a web page to take responsiveness as a major key factor. However, the breakpoints to be stated are usually the iPhone at 320px and 480px, the tablet (usually the iPad at 768px and 1024px) and finally anything above 1024px.

@media screen and (max-width: 768px) {
  div.example {
    display: none;
  }
}

However, it is also recommended to design the mobile viewport first. Then, as you maximize the view, add the other breakpoints.

To gain more insights on the different screen sizes and CSS media queries, check out Media_Queries website. Also, a follow up on the list for the various device breakpoints can be found on the responsive design website.

There are different ways of attaching the CSS media queries into your HTML file as listed below:

• by adding it directly into your CSS file (use @media query)
• directly add the media link tag into your HTML file
  (use media=” tag within the header <link>)
• by using JavaScript to serve relevant CSS files
• by using a mixture of all the above.

It can be linked in a CSS FILE as thus:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

CSS media queries are very powerful tools, it is used in almost all CSS frameworks ranging from Bootstrap, foundation, material CSS etc. In addition to media types, there are also media features. Media features provide more specific details to media queries by allowing to test for specific features such as user agent or display device, check out w3schools media queries web page.

As the saying goes,

Learning HTML and CSS is a lot more challenging than it used to be. Responsive web design adds more layers of complexity to design and developing websites.
― Jacob Lett.