@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 .

Query Media in CSS Picture 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

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

Media Feature

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; 
  } 
 } 

Query Media in CSS Picture 2

Full code:

Hide the div when the screen size is smaller

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; 
  } 
 } 
 
 Query Media in CSS Picture 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%; 
  } 
 } 

Query Media in CSS Picture 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 
 

 /* 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%; 
  } 
 } 

 Page Title 
 

  Làng Công nghệ 
  Công nghệ 
  Khoa học 
  Cuộc sống 
 

  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 
 
 
   

  tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó. 
    

  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.