Friday, March 29, 2024

How to Apply Media Queries to CSS Style Sheets

Media queries are popular when it comes to customizing style sheets for different devices (for desktops, laptops, tablets and mobile phones). Also, through media queries, we can modify the web application or website depending on the device or specific parameters (for example: window width for site viewing or screen resolution).

Media Query uses the @media rule to add the CSS properties, and the condition must be true. Basically, a media query is a CSS procedure that was introduced in CSS3. Media queries are used to check the following: the height and width of the device used, the resolution, the portrait or landscape and the width and height of the viewport.

  • Browser support — It is supported by all major browsers: Safari, Opera, Google Chrome, Firefox and Internet Explorer
  • Media Query Syntax — A media query is limited to a media type and may have one or more expressions that are either true or false. When the media query is true, it is applied to the specific style sheet or style rules. The query result may be true when the type of media used matches the device model, and all the expressions in that media query are true.
  • Media types — all, screen, speech and print.
  • All — acceptable for all media devices
  • Screen — used for mobile phones, tablets, and computer screens
  • Speech — designed for screen readers (voice synthesizers)
  • Print — designed for documents or materials that are viewed on a screen in preview mode
  • Media features — describe the specific features of the device you are using or the environment.

Attention! When we use expressions of the media, we must include them in brackets. I will list them in the rows below : height, width, resolution, orientation, color, color-index, monochrome, display-mode, grid, scan, overflow-inline, overflow-block, hover, pointer, any-hover, any-pointer and so on.

Logical operators (only, and, not) can be used to make a complex query; we can, moreover, combine multiple queries into one rule using commas.

  • Only — is used to apply a style only if a full query matches and you also need to specify a support type
  • And — through it and we can combine more media features in a single media query, but also to combine media features with other media model
  • Not — is used to deny a media query. If it is in a list of queries, queries that are separated by commas, then it will only deny the query to which it is applied; we also have to specify a type of support if we use the operator not

A simple example using media queries

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 800px) and (min-width: 500px), (min-width: 1200px) {
    div.example{
        font-family: Helvetica;
        font-size: 70px;
        padding: 20px;
        border: 5px solid orange;
        background:  gold;
    }
}
</style>
</head>
<body>
<h2>The div used changes its appearance according to the screen size</h2>
<div class="example">Media Query</div>
</body>
</html>

Example of resize the browser window

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-color: beige;
}
@media only screen and (orientation: landscape) {
    body {
        background-color: orange;
    }
}
</style>
</head>
<body>
<h2>Resize the browser window according to width and height</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</body>
</html>

Another example :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#right {
    float: right;
    width: auto;
}
#menulist {
    margin: 0;
    padding: 0;
}
.menu  {
    background: orange;
    border: 1px solid #d4d4d4;
    border-radius: 0px;
    list-style-type: none;
    margin: 20px;
    padding: 8px;
}
@media screen and (min-width: 480px) {
    #right {width: 200px; float: right;}
    #main {margin-left: 230px;}
}
</style>
</head>
<body>
<div class="wrapper">
  <div id="right">
    <ul id="menulist">
      <li class="menu ">About Us</li>
      <li class="menu ">Frequent Questions</li>
      <li class="menu ">Site Map</li>
      <li class="menu ">Contact Us</li>
   </ul>
  </div>
  <div id="main">
    <h1>Tips for Writing Web Content</h1>
    <p>Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet.." comes from a line in section 1.10.32.</p>
  </div>
</div>
</body>
</html>

An example of how to resize the font size

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: orange;
  padding: 20px;
  border: 6px solid brown;
  font-family: Helvetica;
}
@media screen and (min-width:500px) {
  div.example {
    font-size: 70px;
  }
}
@media screen and (max-width: 600px) {
  div.example {
    font-size: 20px;
  }
}
</style>
</head>
<body>
<h2>Processes the font size of a particular element on different dimensions of the screen used</h2>
<div class="example">Media Query</div>
<p>Depending on the width of the browser, the font size will change as many pixels as we chose, in this case the browser width is 500px, the font size is 20px, and when the browser width is greater than 500px, the font size changes depending on our settings (in our case 70px)</p>
</body>
</html>

First image represents the initial figure, without using media, and the other figure is the result after applying it:

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured