Css media

How to use multimedia queries in HTML and CSS to create responsive websites

If you want to develop websites / web applications then knowing how to create responsive designs is essential to your success.

In the past, creating websites that adjusted well to different screen sizes was a luxury that website owners had to ask of a developer. However, the increase in the use of smartphones and tablets has now made responsive design a necessity in the world of software development.

Using media queries is by far the best way to ensure that your website / web app looks exactly the way you want it to on every device.


Understanding Responsive Design

In summary, responsive design is all about using HTML / CSS to create a website / web application layout that adapts to different screen sizes. In HTML / CSS, there are different ways to get responsiveness in designing a website:

  • Use rem and em units instead of pixels (px)
  • Defining the viewport / scale of each web page
  • Using multimedia queries

A media query is a feature of CSS that was released in version CSS3. With the introduction of this new feature, CSS users have the ability to adjust the display of a web page based on the height, width and orientation of the device / screen (landscape mode). or portrait).

Read more: The essential CSS3 properties cheat sheet

VIDEO OF THE DAY MAKEUSE

Media queries provide a framework for creating code once and using it multiple times in your program. This might not seem like much use if you are developing a website with only three web pages, but if you are working for a business with hundreds of different web pages, it will turn out to be a huge time saver.

There are several things to consider when working with media queries: structure, placement, range, and linkage.

Example of a media query structure


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

The general structure of a media request includes:

  • The keyword @media
  • The keyword not / only
  • A type of medium (which can be either screen, print or speech)
  • The keyword “and”
  • A single expression in parentheses
  • CSS code enclosed in a pair of open and closed braces.


Related: Using CSS to Format Documents for Printing

Example of a media query with the single keyword


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

The example above applies CSS styling (especially a blue background color) only to device screens that are 450 pixels and less wide, so mostly smartphones. The keyword “only” can be replaced with the keyword “not”, then the CSS styling in the above media query would only apply to print and speech.

However, by default, a general media query statement applies to all three media types, so it is not necessary to specify a media type unless the goal is to exclude one or more of them. .

Example of default media query


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

A media query is a CSS property; it can therefore only be used in the style language. There are three different ways to include CSS in your code; however, only two of these methods provide a convenient way to include multimedia queries in your programs: internal or external CSS.

The internal method includes adding the tag

How to set a background image in CSS

CSS is a powerful tool for styling web pages. Learning how to place a background image teaches you a lot of CSS basics.

Read more


About the Author