[HTML] Media Query

直接在 css 中使用 media query

viewport的寬度(即瀏覽器可視區域的寬度),大於等於 40em:

@media screen and (min-width: 40em){
  body{
    background-color: blue;
  }
}
  • screen:表示螢幕,除了screen以外,還有all(任何媒體類型)、print(印表機),其他很少用(projection、speech、tv、braille)。
  • min-width:表示最小寬度。
  • max-width:表示最大寬度。

在樣式表連結中使用 media query

<link rel="stylesheet" href="example.css" media="print">
<link rel="stylesheet" href="example.css" media="screen and (min-width: 40em)">

使用 media query 的其他方法

<style media="screen and (min-width: 40em)">
  ...
</style>
@import url(styles.css) screen and (min-width: 40em)

能夠查詢什麼

視埠寬度和高度 (viewport width、viewport height)

  • width:視埠寬度
  • height:視埠高度
/* 詢問視埠是否至少 40 em 寬 */
@media screen and (min-width: 40em){...}
/* 詢問視埠高度是否剛好等於 60 em */
@media screen and (height: 60em){...}

視埠(viewport)是瀏覽器視窗中實際包含網頁的部分,因此,當檢視瀏覽器視窗時,必須扣除頁面邊邊的捲動列、工具列、底部、頂端的一些選單,剩下的才是視埠(viewport)。

螢幕寬度和高度

  • device-width:裝置螢幕寬度
  • device-height:裝置螢幕高度
/* 詢問最大螢幕寬度是否小於等於 40 em */
@media screen and (max-device-width: 40em){...}

device-width 和 device-height 量測的是實際的裝置螢幕,而不是視埠,因此,調整瀏覽器視窗大小並不會有影響。

裝置定向

  • orientation:橫向或直向
/* 詢問裝置是否為橫向 */
@media screen and (orientation: landscape){...}

查詢螢幕是否為橫向或直向,可能非常有用,但可惜的是,尚未受到所有瀏覽器支援。

寬高比

  • aspect-ratio:視埠的寬高比
  • device-aspect-ratio:裝置螢幕的寬高比
/* 詢問螢幕寬高比是否為16:9 */
@media screen and (device-aspect-ratio: 16/9){...}
/* 詢問螢幕寬高比是否至少為1920:1080 */
@media screen and (min-device-aspect-ratio: 1920/1080){...}

視埠寬高比或裝置寬高比是寬度對高度的比率,因此,假如螢幕是 1000 像素寬和 500 像素高,則裝置寬高比將是 2:1

常見的監視器寬高比是 16:9(1920×1080、1366×768)或16:10(1280×800),iphone 3與4s為3:2(480×320、960×640)、iphone 5是16:9(1136×640);android手機通常都是4:3、3:2、16:9、16:10。

解析度

  • resolution:裝置螢幕的解析度
@media screen and (min-resolution: 300dpi){...}

resolution 尚未被 Safari、Chrome支援。

其它媒體特徵

以下這幾個是目前不會用到,但未來可能會有幫助的幾個項目:

  • color
  • color-index
  • monochrome
  • scan
  • grid

瀏覽器支援度

can i use

 

您可在此處留言

搶先留言!

Notify of
avatar
wpDiscuz