Clear, practical technology insights BSOD Code Lookup · Windows Error Code Lookup · Wi-Fi Troubleshooting · PC Troubleshooting Checklist
TipsMake

What Are Media CSS: Query Media in CSS

Understand What Are Media CSS: Query Media in CSS with clear explanations, practical examples, and useful tips. This updated guide covers the essential...

Table of Contents

What Are Media CSS: Query Media in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

@media in CSS is a feature that allows us to customize CSS to fit different devices like desktop, tablet, smartphone, TV device and printing device.

What Are Media CSS: Query Media in CSS example image 1

These media queries will look at different aspects such as the viewport's width and height, the width and height of the display device, the direction of use is horizontal or vertical along with a specific resolution to adjust for well suited.

@Media syntax

This attribute has the following syntax:

 @media not|only mediatype and (media feature) { 
  CSS-Code; 
 }

Media Type

Value
Describe
all Used for all print devices For screen printers For computers, tablets, smartphones speech For screen reading devices

Media Feature

Value
Describe
aspect-ratio Ratio between the width and height of the viewport color Number of bits for each color of the device using color-index The number of colors that the device uses can display the height of the viewport max-aspect- ratio Maximum ratio between viewport width and height max-color Maximum number of bits for each color of max-color-index device The maximum number of colors that the device uses can display max. -height viewport max-monochrome maximum height Maximum number of bits per color of black and white device max-resolution Max resolution of output device, using dpi or dpcm max-width Maximum width of viewport min-aspect-ratio Minimum ratio between width and height of viewport min-color Minimum number of bits for each color of device using min-color-index The minimum number of colors that the device uses can display min-height Minimum height of viewport min-monochrome Minimum number of bits for each color of the black and white device min-resolution Minimum resolution of the output device, using dpi or dpcm min-width Minimum width of monochrome viewport Number of bits for each black and white device color orientation Direction of viewport (rotate or not set be) resolution Resolution of the output device, using dpi or dpcm width Width of viewport

Some examples

1. If the browser width is less than or equal to 600px, hide the element div class example

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

What Are Media CSS: Query Media in CSS example image 2

Full code:

Hide the div when the screen size is smaller

Example DIV (Tipsmake)

TipsMake.com is a social network about science and technology, expanding content to meeting members' needs for more technology fields such as electricity voice, smart device, electronics, computer security.

2. If the browser width is greater than 800px, set the lavender, 400px to 999px background color to lightsalmon, less than 400px then lightblue.

 body { 
  background-color: lightblue; 
 } 
 
 @media screen and (min-width: 400px) { 
  body { 
  background-color: lightgreen; 
  } 
 } 
 
 @media screen and (min-width: 800px) { 
  body { 
  background-color: lavender; 
  } 
 } 
 

	What Are Media CSS: Query Media in CSS example image 3

Website TipsMake.com

TipsMake.com is a social network about science and technology, expanding content to meeting members' needs for more technology fields such as electricity voice, smart device, electronics, computer security.

3. Create a flexible navigation menu that displays multiple interface sizes (displayed horizontally on a large screen and vertically on a small screen):

 @media screen and (max-width: 600px) { 
  .topnav a { 
  float: none; 
  width: 100%; 
  } 
 }

What Are Media CSS: Query Media in CSS example image 4

Website TipsMake.com

TipsMake.com is a social network about science and technology, expanding content to meeting members' needs for more technology fields such as electricity voice, smart device, electronics, computer security.

  Làng Công ngh? 
  Công ngh? 
  Cu?c s?ng

4. Create flexible display columns interface that meets a variety of interface sizes.

 /* hi?n th? 2 c?t thay vì 4 c?t m?c ??nh khi màn hình có chi?u r?ng d??i 920px*/ 
 @media screen and (max-width: 992px) { 
  .column { 
  width: 50%; 
  } 
 } 
 
 /* các c?t x?p ch?ng lên nhau thay vì c?nh nhau khi màn hình có chi?u r?ng d??i 600px */ 
 @media screen and (max-width: 600px) { 
  .column { 
  width: 100%; 
  } 
 }

What Are Media CSS: Query Media in CSS example image 5

You resize the browser to see the change:

Website TipsMake.com

QTM

Some text.

QTM

Some text.

QTM

Some text.

QTM

Some text.

5. Create layout website display flexibly to meet many interface sizes.

What Are Media CSS: Query Media in CSS example image 6


 Page Title

Website TipsMake.com

Knowledge - Experience - FAQ

Using flexible layout.

  Làng Công ngh? 
  Công ngh? 
  Khoa h?c 
  Cu?c s?ng

Introduce

Image

TipsMake.com is a social network about science and technology.

Highlights

Image
 
Image
 
Image

Follow Me

Facebook

YouTube

Form - Form in CSS

Quách T?nh, February 14, 2019
Image

Forms are an integral part of any kind of website.

Here, TipsMake.com will show you how to build the section

  giao di?n hi?n th? c?a m?t bi?u m?u c? b?n. Giao di?n này có th? ???c làm 
  khá ??p m?t v?i CSS

Attribute Selector in CSS

Quách T?nh, February 14, 2019
Image

Attribute selector is the way to select the elements you want to type in

  tài li?u HTML d?a vào thu?c tính c?a m?t hay nhi?u th? HTML nào ?ó.

Attribute selector can select objects without having to

  khai báo thêm các Class ho?c ID vào trong th? HTML và v?n có th? h??ng 
  ???c ??n các thành ph?n ?ó, giúp code g?n gàng h?n và m?ch l?c h?n.

License No. 362 / GP-BTTTT. Ministry of Information and Communications issued on June 30, 2016.

FAQ

What should you know about @Media syntax?

This attribute has the following syntax:

What should you know about media Type Value Describe all Used for all print devices For screen printers For computers, tablets, smartphones speech For screen reading devices Media Feature Value Describe aspect-ratio Ratio between the width and height of the viewport color Number of bits for each color of the device using color-index The number of colors that the device uses can display the height of the viewport max-aspect- ratio Maximum ratio between viewport width and height max-color Maximum number of bits for each color of max-color-index device The maximum number of colors that the device uses can display max. -height viewport max-monochrome maximum height Maximum number of bits per color of black and white device max-resolution Max resolution of output device, using dpi or dpcm max-width Maximum width of viewport min-aspect-ratio Minimum ratio between width and height of viewport min-color Minimum number of bits for each color of device using min-color-index The minimum number of colors that the device uses can display min-height Minimum height of viewport min-monochrome Minimum number of bits for each color of the black and white device min-resolution Minimum resolution of the output device, using dpi or dpcm min-width Minimum width of monochrome viewport Number of bits for each black and white device color orientation Direction of viewport (rotate or not set be) resolution Resolution of the output device, using dpi or dpcm width Width of viewport Some examples?

1. If the browser width is less than or equal to 600px, hide the element div class example

What should you know about hide the div when the screen size is smaller Example DIV (Tipsmake) TipsMake.com is a social network about science and technology, expanding content to meeting members' needs for more technology fields such as electricity voice, smart device, electronics, computer security. 2. If the browser width is greater than 800px, set the lavender, 400px to 999px background color to lightsalmon, less than 400px then lightblue. body { background-color: lightblue; } @media screen and (min-width: 400px) { body { background-color: lightgreen; } } @media screen and (min-width: 800px) { body { background-color: lavender; } } Website TipsMake.com?

TipsMake.com is a social network about science and technology, expanding content to meeting members' needs for more technology fields such as electricity voice, smart device, electronics, computer security.

Discussion

Reader Comments 0

Sign in with email or Google to join the discussion.

The Multiple-choice Question Set Has an Answer to Query P1The Multiple-choice Question Set Has an Answer to Query P14 minutes readAppend Query: Action Query in Action 2016Append Query: Action Query in Action 20167 minutes readMultiple Choice Questions Have a Query OptionMultiple Choice Questions Have a Query Option4 minutes readSet up Query Criteria in Access 2016Set up Query Criteria in Access 20164 minutes readWhat Do You Know About Data Queries?What Do You Know About Data Queries?4 minutes readThe Bootcfg Query Command in WindowsThe Bootcfg Query Command in Windows3 minutes read