Css media

Introduction to CSS Media Queries

Profile picture Okikiola Apelehin HackerNoon

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

HTML and CSS are a great way to start your web development journey, but CSS media queries are like the icing on the cake called the responsive web.

Responsive web design is an approach to web design that allows web pages to display 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 are one way to target devices, but it helps to know the dimensions of all those devices. They are the underlying theory of responsive design where we respond to our content to fit any viewport.

Media queries are used with the flex box to create a responsive website. It is also used to modify many things as shown below:

  • the layout of a page according to the orientation of the browser
  • it helps to make images and typography responsive
  • the width and height of the window and the device.

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

There are different devices in the market, as shown above, this 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 content on your site will respond to provide the user with the best possible layout for consuming information.

For example, after designing a webpage on a 17 inch laptop screen, without media queries, the webpage will not be friendly on the mobile view for obvious reasons. It is relevant for both web designers and developers because creating a web page considers responsiveness as a major key factor. However, the breakpoints to set 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 moving window first. Then, as you enlarge the view, add the other breakpoints.

For more information on different screen sizes and CSS media queries, see the Media_Queries website. Also, a tracking list of various device breakpoints can be found on the responsive design website.

There are different ways to enclose CSS media queries in your HTML file as shown below:

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

It can be linked into a CSS FILE as follows:

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

CSS Media Queries are very powerful tools, they are used in almost all CSS frameworks ranging from Bootstrap, Foundation, Material CSS, etc. In addition to media types, there are also multimedia features. Media features provide more specific details to media queries by allowing testing of specific features such as user agent or display device, see the w3schools media queries webpage.

As the saying goes,

Learning HTML and CSS is much more difficult than before. Responsive web design adds more layers of complexity to website design and development.
-Jacob Lett.

Keywords