【Day06】實戰開始 - 區塊分割2

上一篇我們提到了如何在vue Framework裡使用JavaScript撰寫function，接下來就是重頭戲了，要如何在手機上開啟我們的網頁，而不會產生跑版的情況呢?

有兩種方法:

針對不同Device建立不同的網站，在網站上判斷使用者連上的裝置導至不同頁面
透過CSS標籤設定不同裝置下的呈現方式

我們選擇第二種，原因是因為第一種方法耗時耗力，而且還無法保證一定會涵蓋到所有的裝置。
但要怎麼做呢?
在開始前，我們必須要了解何謂RWD(Responsive Web Design, 響應式網站設計)。
響應式網頁設計(Responsive Web Design)，又稱適應性網頁、響應式網頁設計，透過在網站使用CSS3，以百分比的方式以及彈性的畫面設計，在不同解析度下改變網頁頁面的佈局排版，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺與使用者體驗。

在W3C所定義的CSS標準中，透過@media標籤就可以辦到這件事，media在CSS2就已存在，在CSS3版本中做了一些微幅修改。

在media標籤中，分為以下幾種type:

all: 適用於所有裝備。
print: 用於預覽頁面列印時所顯示的畫面
screen: 主要適用於螢幕。
speech: 主要適用於語音合成器。

再來，分為幾種feature(以下僅列舉)，用來定義視窗的尺寸即顯示品質等等:

device-height: 裝置螢幕高度。
max-device-height:裝置螢幕高度。
min-device-height: 裝置螢幕高度。
device-width: 裝置螢幕寬度。
max-device-width:裝置螢幕寬度。
min-device-width:裝置螢幕寬度。
height: 視窗高度。
max-height: 視窗高度。
min-height: 視窗高度。
width: 視窗寬度。
max-width: 視窗寬度。
min-width: 視窗寬度。
orientation: 螢幕旋轉方向，可設定 portrait(直向)與landscape (橫)。
aspect-ratio: 螢幕長寬比例，寫法格式為「長/寬」，如 1680/720。可寫成 max-aspect-ratio (最大長寬比) 或 min-aspect-ratio (最小長寬比)。

大致了解media的功用後，我們來看看如何應用在我們的專案中。:

針對視窗寬度大於或等於769px的頁面:

@media only screen and (min-width: 769px) {
body{
    background-color:#E6F8E0;
    overflow-x: hidden;
  }
.container div{
   display: inline-block;
 }
 .menu {
     font-family: 'GenYoRegular';
     height: 100vh;
     width: 280px;
     background-color:#E6E6E6;
     float: left;
     position: fixed;
 }

針對視窗寬度大於321並小於769px的頁面:

@media only screen and (min-width: 321px) and (max-width: 768px) {
 body{
    background-color:#E6F8E0;
    overflow-x: hidden;
  }
.container div{
   display: inline-block;
 }
 .menu {
     font-family: 'GenYoRegular';
     background-color:#E6E6E6;
     width: 100%;
     height: auto;
     position: relative;
 }

針對視窗寬度大於0並小於320px的頁面:

@media only screen and (min-width: 0px) and (max-width: 320px){
 body{
    background-color:#E6F8E0;
    overflow-x: hidden;
  }
.container div{
   display: inline-block;
 }
 .menu {
     font-family: 'GenYoRegular';
     background-color:#E6E6E6;
     width: 100%;
     height: auto;
     position: relative;
 }

以上CSS都只是示範，可以依照自己的需求做改變。
上面的CSS比較重要的是當我們的視窗大小<768px的時候，我將menu的posion設為relative相對定位，讓他可以在頁面改變時，
透過相對定位移動。
滿版畫面: