week16 - stayjay/wp109b GitHub Wiki

響應式網頁設計

什麼是響應式網頁設計？響應式網頁設計使您的網頁在所有設備上都看起來不錯。

響應式網頁設計僅使用 HTML 和 CSS。

響應式網頁設計不是程序或 JavaScript。

可以使用許多不同的設備查看網頁：台式機、平板電腦和手機。無論使用何種設備，您的網頁都應該看起來不錯，並且易於使用。使用 CSS 和 HTML 來調整大小、隱藏、縮小、放大或移動內容以使其在任何屏幕上看起來都不錯時，它被稱為響應式網頁設計。例子

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

結果

Chania
The Flight
The City
The Island
The Food
The City
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

What?
Chania is a city on the island of Crete.

Where?
Crete is a Greek island in the Mediterranean Sea.

How?
You can reach Chania airport from all over Europe.

Resize the browser window to see how the content respond to the resizing.

響應式網頁設計 -視口

什麼是視口？視口是網頁的用戶可見區域。

視口因設備而異，在手機上會比在電腦屏幕上小。

在平板電腦和手機之前，網頁只是為電腦屏幕設計的，並且網頁具有靜態設計和固定尺寸是很常見的。

然後，當我們開始使用平板電腦和手機上網時，固定尺寸的網頁太大而無法適應視口。為了解決這個問題，這些設備上的瀏覽器縮小了整個網頁以適應屏幕。

這並不完美！！但是可以快速解決。

設置視口 HTML5 引入了一種方法，讓網頁設計師通過標籤控制視口。

您應該在所有網頁中包含以下視口元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這為瀏覽器提供了有關如何控制頁面尺寸和縮放比例的說明。

該width=device-width部分設置頁面的寬度以跟隨設備的屏幕寬度（這將因設備而異）。

該initial-scale=1.0部分設置瀏覽器首次加載頁面時的初始縮放級別。將內容調整到視口用戶習慣於在桌面和移動設備上垂直滾動網站 - 但不是水平滾動！

因此，如果用戶被迫水平滾動或縮小以查看整個網頁，則會導致糟糕的用戶體驗。

要遵循的一些額外規則：

不要使用大的固定寬度元素 -例如，如果圖像以比視口寬的寬度顯示，則可能導致視口水平滾動。請記住調整此內容以適應視口的寬度。
不要讓內容依賴特定的視口寬度來呈現良好的效果- 由於屏幕尺寸和 CSS 像素寬度在不同設備之間差異很大，因此內容不應依賴特定的視口寬度來呈現良好的效果。
使用 CSS 媒體查詢為小屏幕和大屏幕應用不同的樣式- 為頁面元素設置大的絕對 CSS 寬度會導致元素對於較小設備上的視口來說太寬。相反，請考慮使用相對寬度值，例如 width: 100%。此外，請注意使用較大的絕對定位值。它可能會導致元素在小型設備上落在視口之外。

響應式網頁設計 -網格視圖

什麼是網格視圖？許多網頁都是基於網格視圖，這意味著頁面被分成幾列：在設計網頁時，使用網格視圖非常有用。它可以更輕鬆地在頁面上放置元素。響應式網格視圖通常有 12 列，總寬度為 100%，並且會隨著您調整瀏覽器窗口的大小而縮小和擴展。

構建響應式網格視圖

讓我們開始構建響應式網格視圖。

首先確保所有 HTML 元素的box-sizing屬性都設置為 border-box。這確保填充和邊框包含在元素的總寬度和高度中。

在您的 CSS 中添加以下代碼：

* {
  box-sizing: border-box;
}

例子

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

如果網頁僅包含兩列，則上面的示例很好。

但是，我們希望使用具有 12 列的響應式網格視圖，以更好地控製網頁。

首先，我們必須計算一列的百分比：100% / 12 列 = 8.33%。

然後我們為 12 列中的每一列創建一個類，class="col-"以及一個定義該部分應該跨越多少列的數字：

CSS：

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

所有這些列都應該向左浮動，並且填充為 15px：

CSS：

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

每一行都應該用一個

. 一行內的列數應始終為 12：

HTML：

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

一行內的列都是向左浮動的，因此脫離了頁面的流程，其他元素會像列不存在一樣放置。為了防止這種情況，我們將添加一個清除流的樣式：

CSS：

.row::after {
  content: "";
  clear: both;
  display: table;
}

我們還想添加一些樣式和顏色以使其看起來更好：

例子

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

響應式網頁設計- 媒體查詢

什麼是媒體查詢？媒體查詢是 CSS3 中引入的一種 CSS 技術。

@media僅當特定條件為真時，它才使用規則來包含 CSS 屬性塊。

例子如果瀏覽器窗口為 600px 或更小，背景顏色將為淺藍色：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

響應式網頁設計 -圖像

使用 width 屬性如果width屬性設置為百分比並且height屬性設置為“自動”，則圖像將具有響應性並放大和縮小：

例子

img {
  width: 100%;
  height: auto;
}

請注意，在上面的示例中，可以將圖像放大到大於其原始大小。在許多情況下，更好的解決方案是使用該 max-width屬性。

使用 max-width 屬性

如果該max-width屬性設置為 100%，則圖像將在必要時縮小，但永遠不會放大到大於其原始尺寸：

例子

img {
  max-width: 100%;
  height: auto;
}

將圖像添加到示例網頁例子

img {
  width: 100%;
  height: auto;
}

背景圖片

背景圖像還可以響應調整大小和縮放比例。

這裡我們將展示三種不同的方法：

如果background-size屬性設置為“包含”，背景圖片會縮放，並嘗試適應內容區域。但是，圖像將保持其縱橫比（圖像的寬度和高度之間的比例關係）：這是CSS代碼：

例子

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

如果該background-size屬性設置為“100% 100%”，背景圖片將拉伸以覆蓋整個內容區域：這是CSS代碼：

例子

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

如果該background-size屬性設置為“cover”，背景圖像將縮放以覆蓋整個內容區域。請注意，“cover”值保持縱橫比，背景圖像的某些部分可能會被剪裁：這是CSS代碼：

例子

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

不同設備的不同圖像大圖像在大電腦屏幕上可以完美呈現，但在小設備上卻毫無用處。無論如何都必須按比例縮小圖像，為什麼還要加載大圖像？為了減少負載或出於任何其他原因，您可以使用媒體查詢在不同設備上顯示不同的圖像。

這是將在不同設備上顯示的一張大圖像和一張小圖像

例子

/* For width smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

可以使用媒體查詢min-device-width而不是min-width，它會檢查設備寬度，而不是瀏覽器寬度。那麼當你調整瀏覽器窗口大小時圖像不會改變：

例子

/* For devices smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

HTML 元素

HTML元素為 Web 開發人員指定圖像資源提供了更大的靈活性。

該元素最常見的用途是用於響應式設計中的圖像。與根據視口寬度放大或縮小一張圖像不同，可以設計多張圖像以更好地填充瀏覽器視口。

該元素的工作原理類似於和元素。您設置了不同的源，第一個符合首選項的源是正在使用的源：

例子

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

該srcset屬性是必需的，它定義了圖像的來源。

該media屬性是可選的，並接受您在CSS @media rule 中找到的媒體查詢。

您還應該為不支持該元素的瀏覽器定義一個元素。

響應式網頁設計 -視頻

使用 width 屬性如果該width屬性設置為 100%，視頻播放器將響應並放大和縮小：

例子

video {
  width: 100%;
  height: auto;
}

請注意，在上面的示例中，視頻播放器可以放大到大於其原始大小。在許多情況下，更好的解決方案是使用該 max-width屬性。

使用 max-width 屬性

如果該max-width屬性設置為 100%，視頻播放器將在必要時縮小，但絕不會放大到大於其原始大小：

例子

video {
  max-width: 100%;
  height: auto;
}

將視頻添加到示例網頁我們想在我們的示例網頁中添加一個視頻。視頻將調整大小以始終佔用所有可用空間：

例子

video {
  width: 100%;
  height: auto;
}

響應式網頁設計 -框架

有許多免費的 CSS 框架提供響應式設計。

使用 W3.CSS 創建響應式設計的一個好方法是使用響應式樣式表，例如W3.CSS

W3.CSS 使開發任何大小的網站都變得容易！引導程序另一個流行的框架是 Bootstrap，它使用 HTML、CSS 和 jQuery 來製作響應式網頁。

例子

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>
</div>

</body>
</html>

結果

My First Bootstrap Page
Resize this responsive page to see the effect!

Column 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Column 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

CSS網格佈局模塊

網格佈局 CSS Grid Layout Module 提供了一個基於網格的佈局系統，帶有行和列，可以更輕鬆地設計網頁，而無需使用浮動和定位。

瀏覽器支持所有現代瀏覽器都支持網格屬性。網格元素網格佈局由一個父元素和一個或多個子元素組成。

例子

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

123 456 789

### 顯示屬性
當 HTML 元素的display屬性設置為 grid或時，它就成為網格容器inline-grid。

例子
```html
.grid-container {
  display: grid;
}

例子

.grid-container {
  display: inline-grid;
}

網格容器的所有直接子項都會自動成為網格項。可以使用以下屬性之一調整間隙大小：

grid-column-gap
grid-row-gap
grid-gap

例子

該grid-column-gap屬性設置列之間的間隙：
```html
.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

例子該grid-row-gap屬性設置行之間的間隙：

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

例子該grid-gap屬性是grid-row-gap和以下 grid-column-gap屬性的簡寫屬性：

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

例子該grid-gap屬性還可用於在一個值中設置行間距和列間距：

.grid-container {
  display: grid;
  grid-gap: 50px;
}

所有 CSS 網格屬性

Property Description column-gap Specifies the gap between the columns gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-gap Specifies the size of the gap between columns grid-column-start Specifies where to start the grid item grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-gap Specifies the size of the gap between rows grid-row-start Specifies where to start the grid item grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout row-gap Specifies the gap between the grid rows

CSS網格容器

網格容器要使 HTML 元素充當網格容器，您必須將display屬性設置為 grid或inline-grid。

網格容器由放置在列和行內的網格項組成。

grid-template-columns 屬性

該grid-template-columns屬性定義了網格佈局中的列數，並且可以定義每列的寬度。

該值是一個以空格分隔的列表，其中每個值定義相應列的寬度。

如果您希望網格佈局包含 4 列，請指定 4 列的寬度，如果所有列都應具有相同的寬度，則指定“自動”。

例子製作一個有 4 列的網格：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

注意：如果您在 4 列網格中有 4 個以上的項目，網格將自動添加一個新行來放置項目。

該grid-template-columns屬性還可用於指定列的大小（寬度）。

例子設置 4 列的大小：

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

grid-template-rows 屬性該grid-template-rows屬性定義了每行的高度。

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

justify-content 屬性該justify-content屬性用於對齊容器內的整個網格。

例子
.grid-container {
  display: grid;
  justify-content: space-evenly;
}

例子

.grid-container {
  display: grid;
  justify-content: space-around;
}

例子

.grid-container {
  display: grid;
  justify-content: space-between;
}

例子

.grid-container {
  display: grid;
  justify-content: center;
}

例子

.grid-container {
  display: grid;
  justify-content: start;
}

例子

.grid-container {
  display: grid;
  justify-content: end;
}

align-content 屬性該align-content屬性用於垂直對齊容器內的整個網格。例子

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

例子

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

例子

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

例子

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

例子

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

例子

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Sass教程

Sass 是一個 CSS 預處理器。

Sass 減少了 CSS 的重複，從而節省了時間。

每章示例我們的“Show Sass”工具使學習 Sass 變得容易，它同時顯示代碼和結果。

Sass 示例

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

Sass介紹

你應該知道的在繼續之前，您應該對以下內容有一個基本的了解：

HTML CSS 想先學習這些科目，請在我們的主頁上找到教程。什麼是薩斯？

薩斯代表小號yntactically一個wesome 小號tyle小號HEET
Sass 是 CSS 的擴展
Sass 是一個 CSS 預處理器
Sass 完全兼容所有版本的 CSS
Sass 減少了 CSS 的重複，從而節省了時間
Sass 由 Hampton Catlin 設計，由 Natalie Weizenbaum 於 2006 年開發
Sass 可以免費下載和使用

為什麼要使用 Sass？樣式表越來越大、越來越複雜，也越來越難維護。這是 CSS 預處理器可以提供幫助的地方。

Sass 允許您使用 CSS 中不存在的功能，例如變量、嵌套規則、mixin、導入、繼承、內置函數和其他東西。

Sass 有用的一個簡單例子 Sass 示例

/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

參考網址

https://www.w3schools.com/css/default.asp

https://www.w3schools.com/sass/default.php

week16 - stayjay/wp109b GitHub Wiki

響應式網頁設計

響應式網頁設計 -視口

響應式網頁設計 -網格視圖

構建響應式網格視圖

響應式網頁設計- 媒體查詢

響應式網頁設計 -圖像

使用 max-width 屬性

背景圖片

HTML 元素

響應式網頁設計 -視頻

使用 max-width 屬性

響應式網頁設計 -框架

CSS網格佈局模塊

所有 CSS 網格屬性

CSS網格容器

grid-template-columns 屬性

Sass教程

Sass介紹

參考網址

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️