នៅក្នុងការរចនាគេហទំព័រ @media គឺជា rule មួយដែលត្រូវបានគេយកទៅប្រើប្រាស់ក្នុងការរចនាក្បាច់ខុសៗគ្នាតំរូវទៅតាមទំហំ screen របស់ឧបករណ៍អេឡិចត្រូនិក មានដូចជា screen របស់ desktop, laptop, iPad, និង ទូរស័ព្ទដៃជាដើម។ ហើយការកែច្នៃគេហទំព័រអោយមានក្បាច់រចនាខុសៗគ្នាអាស្រ័យទៅតាមឧបករណ៍អេឡិចត្រូនិកនេះ ត្រូវគេហៅជាភាសាអង់គ្លេសថា responsive design ។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Media Query</title>
    <style>
      body {
  		background-color: pink;
	  }

	  @media screen and (min-width: 600px) {
  	  	body {
    	  background-color: lightgreen;
  	  	}
	  }
    </style>
  </head>
  
  <body>
	Resize the browser window to see the effect!
	The media query will only apply if the media type is screen and the viewport is 600px wide or wider.
  </body>
</html>

Resize the browser window to see the effect!

The media query will only apply if the media type is screen and the viewport is 600px wide or wider.