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


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

有兩種方法:

  1. 針對不同Device建立不同的網站,在網站上判斷使用者連上的裝置導至不同頁面
  2. 透過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相對定位,讓他可以在頁面改變時,
透過相對定位移動。
滿版畫面:

頁面改變時(大家可以縮小Browser看一下效果):

以上就是今天的內容,最後一天將會介紹如何透過免費靜態服務部署自己的網站。

#Web #切版






留言討論