以下這段程式碼作用是，設定螢幕最大寬度640px，水平居中，以及不同螢幕下字型大小。可以將此放進common.css中使用：

@media only screen and (min-width: 640px) {
  html {
    font-size: 32px;
    background: #8cbc8b; }

  body {
    width: 640px;
    margin: 0 auto; }
  }
@media only screen and (min-width: 620px) and (max-width: 640px) {
  html {
    font-size
 
: 32px; } }
@media only screen and (min-width: 600px) and (max-width: 620px) {
  html {
    font-size: 31px; } }
@media only screen and (min-width: 580px) and (max-width: 600px) {
  html {
    font-size: 30px; } }
@media only screen and (min-width: 560px) and (max-width: 580px) {
  html {
    font-size: 29px; } }
@media only screen and
 
 (min-width: 540px) and (max-width: 560px) {
  html {
    font-size: 28px; } }
@media only screen and (min-width: 520px) and (max-width: 540px) {
  html {
    font-size: 27px; } }
@media only screen and (min-width: 500px) and (max-width: 520px) {
  html {
    font-size: 26px; } }
@media only screen and (min
 
-width: 480px) and (max-width: 500px) {
  html {
    font-size: 25px; } }
@media only screen and (min-width: 460px) and (max-width: 480px) {
  html {
    font-size: 24px; } }
@media only screen and (min-width: 440px) and (max-width: 460px) {
  html {
    font-size: 23px; } }
@media only screen and (min-width: 430px) and (max-width: 440px) {
  html {
    font-size: 22px; } }
@media only screen and (min-width: 420px) and (max-width: 430px) {
  html {
    font-size: 21.5px; } }
@media only screen and (min-width: 410px) and (max-width: 420px) {
  html {
    font-size: 21px; } }
@media only screen and (min-width: 400px) and (max-width: 410px) {
  html {
    font-size: 20.5px; } }
@media only screen and (min-width: 380px) and (max-width: 400px) {
  html {
    font-size: 20px; } }
@media only screen and (min-width: 360px) and (max-width: 380px) {
  html {
    font-size: 19px; } }
@media only screen and (min-width: 340px) and (max-width: 360px) {
  html {
    font-size: 18px; } }
@media only screen and (min-width: 320px) and (max-width: 340px) {
  html {
    font-size: 17px; } }
@media only screen and (min-width: 300px) and (max-width: 320px) {
  html {
    font-size: 16px; } }
@media only screen and (max-width: 300px) {
  html {
    font-size: 15px; } }

CSS3 @media 查詢

如果文件寬度小於 300 畫素則修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}