CSS & RWD 測驗

以下哪個 Media Query 有語法上的錯誤？

• @media print {

  }

• @media (min-width: 768px) {

  }

• @media (min-width: 768px) or (max-width: 991px) {

  }

• @media screen and (min-width: 1200px) {

  }

CSS 的 position 屬性，包含了哪些？

• relative

• sticky

• absolute

• static

• fixed

預設上，當一個區塊，設定寬度(width)或高度(height)的時候，指的是內容區域，如果希望算到邊框(border)的話，那應該設定 box-sizing 為哪個屬性值？

(a)  

在做 RWD 的時候，需要加上以下哪個 viewport？

• <meta name="description" content="html is responsible for structure, css for visual.">

• <meta charset="utf-8">

• <meta name="keywords" content="html, css, viewport">

• <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, user-scalable=0">

bootstrap 格線系統的 .row 當中，運用到了 margin 負邊界，所以將 .row 放在 div 裡的時候，這個 div 務必加上以下哪兩個屬性，以致於 .row 的範圍才不會超出去？

• margin-left: 15px;

• padding-left: 15px;

• margin-right: 15px;

• padding-right: 15px;

CSS 當中的哪一個屬性，可以讓某元素套用之後，可以設定該元素的左邊、右邊，都不能有任何的浮動元素，如果有的話，該元素就會一直往下掉，掉到左右都沒有浮動元素為止。

(a)  

以下哪個寫法，可以特別指定在列印的時候，將 a 標籤的文字顏色改為紅色？

• @media screen {
    a {
      color: red;
    }
  }

• @media print {
    a {
      color: red;
    }
  }

• @media print {
    a {
      background-color: red;
    }
  }

• @media (min-width: 768px){
    a {
      color: red;
    }
  }

平常會使用自己的電腦做網站開發，但 RWD 需要實際用手機來看整個介面、功能是否正常，可透過下列哪個工具做到？

• bootstrap

• sass

• ngrok

• jQuery

CSS 當中的 display 屬性設定當中，以下哪幾個是可以將 div 變成橫向排列？

• inline

• inline-block

• block

• flex

• none

Bootstrap 的格線系統當中，將螢幕的整個寬度，設定了哪些分界點？

• 576

• 768

• 992

• 1200

• 1600