---
# System prepended metadata

title: vue media套件 17
tags: [vue]

---

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