# vue media套件 17

###### tags: `vue`

media套件是基於Css來改動，他可以偵測版面大小來控制html元素或調整css的效果。

### 安裝
在你的專案資料夾開啟cmd輸入

`npm add vue-media`

開啟專案，在你想用media的元件裡import media。

import Media from 'vue-media'
export default {
  components: {
    Media
  },
}

就可以使用了

---

### 範例

我們只要在template輸入media標籤，並設定條件，他就會即時偵測頁面長寬判斷是否執行media標籤裡的html標籤。這是直接在template修改的方法。

<template>
  <div class="home">
    <media :query="{minWidth: '400px'}">
        <p>寬度大於400px</p>
    </media>
    <media :query="{maxWidth: '400px'}">
        <p>寬度小於400px</p>
    </media>
    <media :query="{minHeight: '300px'}">
        <p>高度大於300px</p>
    </media>
    <media :query="{maxHeight: '300px'}">
        <p>高度小於300px</p>
    </media>
  </div>
</template>

---

接著我們來做在css修改的方法。
在css裡增加media，就會依據你的條件來更改css。

  @media (min-width:1px) and (max-width:200px){
      .show{
        background-color: red;
      }
  }
  @media (min-width:201px) and (max-width:400px){
      .show{
        background-color: green;
      }
  }
  @media (min-width:401px) and (max-width:600px){
      .show{
        background-color: blue;
      }
  }
  @media (min-width:601px) and (max-width:800px){
      .show{
        background-color: yellow;
      }
  }
  @media (min-width:801px){
      .show{
        background-color: chocolate;
      }
  }

media還能判斷你的裝置是橫向還是直向，請看以下程式碼。

<h1>直立時是紅色，橫立時是藍色</h1>

orientation: portrait是直向
orientation: landscape是橫向

  @media (orientation: portrait){
    h1{
      color: red;
    }
  }
  @media (orientation: landscape){
    h1{
      color: blue;
    }
  }