CSS Media Queries for All Devices: Responsive Layout

Do you want your website looks awesome on mobile devices? Now is the time to learn what are CSS media queries and how CSS media queries for all devices work to create responsive layouts is essential if you are developing websites/web applications. Developing websites that adapt effectively to different screen sizes used to be an extra that website users had to request from a developer.

However, with the increased use of smartphones and tablets, responsive design has become a requirement in the field of software development. Using media queries is by far the most effective technique to ensure that your website/web app looks precisely the way you want it to on every device.

Understanding Responsive Design

In short, responsive design is the use of HTML/CSS to develop a website/web app design that responds to a number of screen sizes. There are multiple methods to achieving responsiveness in a website design using HTML/CSS:

• Using rem and em units rather than pixels (px)
• Setting each webpage’s viewport/scale
• Using media inquiries

What Are Media Queries?

A media query is a CSS feature that arrived in the CSS3 version. Clients of CSS now have the opportunity to modify the presentation of a webpage according to device/screen height, width, and position (landscape or portrait mode) with the launch of this new ability.

Media queries offer a framework for writing code once and reusing it across your program. This may not seem useful if you’re creating a website with just three pages on it, but if you’re working for an employer with hundreds of separate web pages, this will be a huge time saver.

When using media queries, you must consider different variables, such as structure, location, range, and links.

Media Query Structure 

@media only/not media-type and (expression) {
  /*CSS code*/
}

Example of a Media Query Structure

A media inquiry has the following general structure:

• @media is a keyword.
• The keyword not/only
• A type of media (either screen, print, or speech)
• “and” is a keyword.
• CSS code is bounded by a pair of open and closed curly brackets.

Example of a Media Query Using Only One Keyword

<!-- CSS Media Queries for All Devices -->
@media only screen and (max-width: 450px) {
  body {
    background-color: #004aad;
  }
}

Output:

The previous example applies CSS styling (particularly, a blue background color) to only screens of devices with widths of 450px or less—basically, smartphones. If the “only” keyword replaces with the “not” keyword, the CSS style in the media query above will only apply to text and speech. 

A common media query announcement, on the other together, applies to all three media types by default, therefore there is no requirement for specifying a media type unless the goal is to limit one or more of them.

Default Media Query Example

/*design for smartphones*/
@media (max-width: 450px) {
  body {
    background-color: blue;
  }
}

The Placement of Media Queries

A media query is a CSS property, hence it can only be used within the style language. There are three ways for including CSS in your code; still, only two of those methods give an easy way of including media queries in your programs—internal or external CSS.

The inside method involves including the style> tag in the HTML file’s head> element and creating the media query using the <style> tag’s parameters.

The external way involves including a media query on a separate file of CSS and attaching it to your HTML page with the link> tag.

The Range of Media Queries

Whether using either external or internal CSS, there is one important component of the style language that can have an adverse effect on how a media query performs. There is an order of priority rule in CSS. When employing a CSS selector, or in this example a media query, each new media query added to the CSS file overriding (or takes priority over) the previous one.

The default media query code we have above targets smartphones (450px width and under), so you might believe you could just add the following code to your already present CSS file to set a different background for tablets.

Example of a Tablet Media Query

/* design for tablets */
@media (max-width: 800px) {
  body {
    background-color: red;
  }
}

Output:

The only issue is that owing to the order of priority, tablets will have a red background color, and phones would now have a red background color as well, since 450px and under is less than 800px.

One solution could be to add the media queries for tablets after the ones for devices; the latter will replace the former, resulting in smartphones with blue backgrounds and tablets with red backgrounds.

There is, however, a better method to achieve a different style for tablets and cell phones without thinking about an order of priority. This is a range specification feature of media queries, where the developer can write a media query with the highest and lowest width (the range).

Example of a Tablet Media Query with a Range

/* design for tablets */
 <!-- CSS Media Queries for All Devices -->
@media (max-width: 800px) and (min-width: 451px) {
  body {
    background-color:  Aqua;
  }
}

Output:

The location of media queries within a stylesheet becomes unneeded in the above example because the design for tablets and smartphones targets two separate types of width.

Media Queries with Links

There is an alternate way if you do not wish to include media queries in your CSS code. This method includes using media queries in an HTML file’s link> tag, so instead of having one big stylesheet with design tastes for smartphones, tablets, and PCs, you could use three distinct CSS files to set your media queries in the link> tag.

The HTML element <link> is used for importing CSS styling from a separate stylesheet. This element has a media attribute that functions identically to a media query in CSS.

Example of Using Media Queries in a Link Tag

<body>
  <!-- main stylesheet -->
  <link rel="stylesheet" href="main.css" />
  <!-- tablet stylesheet -->
<!-- CSS Media Queries for All Devices-->
 <link
    rel="stylesheet"
    media="(max-width:800px) and (min-width:451px)"
    href="tablet.css"/>
  <!-- smartphone stylesheet -->
  <link rel="stylesheet" media="(max-width:450px)" href="smartphone.css" />
</body>

The previous code should be included in your HTML file’s <head> tag. Just you have to complete now is create three different CSS documents with names such as main.css, tablet.css, and mobile.css—then develop the unique design that you need for each device.

The main file’s style will apply to all devices with a width higher than 800px, the tablet file’s style will apply to all devices with a width from 450px and 801px, while the smartphone file’s style will apply to all devices with a width less than 451px.

Conclusion: CSS Media Queries for All Devices

If you made it to this point, you now understand how to use Media Queries to create a responsive layout. Media queries can now be detected and used in CSS and HTML files. You were also exposed to CSS order of priority and how it might affect how the media queries perform.

CSS media queries are an effective tool to create flexible and device-independent web pages. Developers may employ media queries to customize the look and arrangement of a web page to different gadgets, sizes, and positions. This technique enables sites to provide users with the best experience possible across an array of structures, including PCs, tablets, laptops, and smartphones.

Media queries enable designers to develop dynamic and flexible layouts by hiding or showing particular content, reorganizing components, or modifying font sizes. Media queries assist make sure websites stay available and functioning to visitors no matter the device they utilize by supporting the diverse array of devices.

In conclusion, CSS media queries are an important method in responsive website design because they allow programmers to create adjustable and user-friendly websites that give an even and optimized performance over an extensive variety of devices.