Flexbox響應式網頁布局 - W3Schools視頻02

codecraft 發布于2019-08-30 15:56 / 3471人閱讀

摘要：今日繼續響應式網頁布局的實現，采用方案。有經驗的前端或多或少已經接觸過這個網站，因為它經常出現在搜索結果的前幾項。因此我想做一系列的影片專門介紹這些。

今日繼續W3Schools響應式網頁布局的實現，采用Flexbox方案。使用Flexbox實現響應式網頁布局是目前最流行的做法。如果你對Flexbox并不熟悉，可以查看W3Schools的教學：

W3Schools Flexbox教學

Flexbox實現響應式網頁布局例子

視頻連結

B站

YouTube

Flexbox響應式網頁布局

透過Flexbox實現響應式網頁布局同樣可分為三步：

將容器顯示為flex，并讓它wrap；

將需要響應的元素放在容器當中，并用百分比設定每一個元素的basis；

通過Media Query將容器的flex方向改為column（預設為row）。

在W3Schools的例子中，Flex容器是這樣設定的：

.row {  
  display: flex;
  flex-wrap: wrap;
}

容器當中的兩欄，即Flex項目：

/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

最后是媒體查詢，斷點設在700px:

@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

改進：移動優先

同樣地，我們也對這個例子進行移動優先的改進，當作是練習。

Flex容器：

.row {  
  display: flex;
  flex-direction: column
}

Flex項目：

.side {
  padding: 20px;
  background-color: #f1f1f1;
}

/* Main column */
.main {
  padding: 20px;
  background-color: white;
}

媒體查詢：

@media screen and (min-width: 700px) {
  .row {
    flex-direction: row;
  }
  .side {
    flex: 30%;
  }
  .main {
    flex: 70%;
  }
}

一樣是，將媒體查詢內外的內容交換。

W3Schools系列的代碼都在GitHub上：W3Schools GitHub

W3Schools教學系列

W3Schools是知名的網頁設計／前端開發教學網站，不僅提供HTML、CSS、JavaScript等的詳盡教學，還可以把它當作說明文件（Documents）。有經驗的前端或多或少已經接觸過這個網站，因為它經常出現在搜索結果的前幾項。其中，它的How To部分更是包含了大量非常實用的例子，例如，如何制作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。

Float響應式網頁布局

Flexbox響應式網頁布局 - W3Schools視頻02

云服務器 GPU云服務器響應式布局 asp如何響應式布局 html響應式導布局響應式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117464.html

響應式網頁布局 - W3Schools How-Tos 01

摘要：視頻連結站響應式網頁布局今天已經是年，基本上所有新建的網頁都會是響應式，以適應在手機顯示。而實現響應式網頁布局主要有種方法當然，以上三者都需要搭配使用。完全就是為了網頁布局及其他二維橫向加縱向布局而設計的，相信未來的網頁都會采用這一設計。 W3Schools教學系列 W3Schools是知名的網頁設計／前端開發教學網站，不僅提供HTML、CSS、JavaScript等的詳盡教學，還可以...

Heier 2019-08-30 15:55 評論0 收藏0
CSS Grid響應式網頁布局 - W3Schools視頻03

摘要：繼續響應式網頁布局的實現，今日講的是方案。就是為二維布局設計的，最適合用來做網頁布局。其中是最小寬度單位，等于六個等于三個等于兩個而則等于五個。繼續W3Schools響應式網頁布局的實現，今日講的是CSS Grid方案。CSS Grid就是為二維布局設計的，最適合用來做網頁布局。目前主流的瀏覽器都已經支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CS...

piapia 2019-08-23 15:57 評論0 收藏0
CSS Grid響應式網頁布局 - W3Schools視頻03

摘要：繼續響應式網頁布局的實現，今日講的是方案。就是為二維布局設計的，最適合用來做網頁布局。其中是最小寬度單位，等于六個等于三個等于兩個而則等于五個。繼續W3Schools響應式網頁布局的實現，今日講的是CSS Grid方案。CSS Grid就是為二維布局設計的，最適合用來做網頁布局。目前主流的瀏覽器都已經支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CS...

leejan97 2019-08-30 15:56 評論0 收藏0