成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

響應(yīng)式網(wǎng)頁(yè)布局 - W3Schools How-Tos 01

Heier / 765人閱讀

摘要：視頻連結(jié)站響應(yīng)式網(wǎng)頁(yè)布局今天已經(jīng)是年，基本上所有新建的網(wǎng)頁(yè)都會(huì)是響應(yīng)式，以適應(yīng)在手機(jī)顯示。而實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)布局主要有種方法當(dāng)然，以上三者都需要搭配使用。完全就是為了網(wǎng)頁(yè)布局及其他二維橫向加縱向布局而設(shè)計(jì)的，相信未來的網(wǎng)頁(yè)都會(huì)采用這一設(shè)計(jì)。

W3Schools教學(xué)系列

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

視頻連結(jié)

B站

YouTube

響應(yīng)式網(wǎng)頁(yè)布局

今天已經(jīng)是2019年，基本上所有新建的網(wǎng)頁(yè)都會(huì)是響應(yīng)式(Responsive)，以適應(yīng)在手機(jī)顯示。而實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)布局主要有3種方法：

Float

Flexbox

CSS Grid

當(dāng)然，以上三者都需要搭配Media Query使用。

其中CSS Grid是最新，也是我最推崇的，但由于太新，較舊的瀏覽器并不支持。不過，大部分的瀏覽器其實(shí)都已經(jīng)支持了，我個(gè)人不會(huì)太擔(dān)心。要想知道哪些瀏覽器支持CSS Grid（或其他新功能），可以前往Can I Use查詢。CSS Grid完全就是為了網(wǎng)頁(yè)布局及其他二維（橫向加縱向）布局而設(shè)計(jì)的，相信未來的網(wǎng)頁(yè)都會(huì)采用這一設(shè)計(jì)。

Flexbox也算新，但瀏覽器支持的情況比CSS Grid要好點(diǎn)?；旧?，目前主流已經(jīng)轉(zhuǎn)向Flexbox，Bootstrap就是很好的例子。但其實(shí)，F(xiàn)lexbox是為一維布局設(shè)計(jì)的（橫向或縱向），而網(wǎng)頁(yè)布局往往是二維的，F(xiàn)lexbox并非最佳選擇，但由于CSS Grid來得太遲，F(xiàn)lexbox又能完成任務(wù)，現(xiàn)在不少新的網(wǎng)頁(yè)以及前端框架采用Flexbox。

Float原來是設(shè)計(jì)來處慮理文繞圖之類的問題，后來被用于布局設(shè)計(jì)。Float布局有著各種各樣的問題，已經(jīng)在逐漸淘汰中，但由于過去應(yīng)用太普遍，相信短時(shí)間內(nèi)并不會(huì)消失，因此也有必要瞭解。

這三種設(shè)計(jì)，W3Schools都有介紹。我會(huì)分成三篇來講，今天先從最古老的Float開始。

Float網(wǎng)頁(yè)布局

Float布局的重點(diǎn)是

讓元素靠向同一個(gè)方向（左或右）

用百分比控制每一個(gè)元素的寬度

透過Media Query改變?cè)貙挾纫赃m應(yīng)不同屏幕尺寸

W3Schools的例子

這個(gè)例子的重點(diǎn)有兩處，一是設(shè)定左右兩柵都向左float，寬度分別為75%和25%：

/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

二是Media Query設(shè)定當(dāng)屏幕尺寸小于800px時(shí)，讓左右兩柵的寬度都變成100%，以實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)（Responsive Design）：

@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

或許你會(huì)注意到導(dǎo)航欄（.topnav）也進(jìn)行了類似的處理，由于原理一樣，就不多說了。

改進(jìn)：移動(dòng)優(yōu)先原則（Mobile First）

之前介紹過移動(dòng)優(yōu)先原則，即先設(shè)計(jì)小屏幕版，再透過Media Query設(shè)定桌面版。W3Schools的這個(gè)例子并沒有采取這一原則，我們可以自行修改，使之符合。方法很簡(jiǎn)單，只要將Median Query里的內(nèi)容和外面相應(yīng)的內(nèi)容反過來即可，不要忘了把Media Query從max-width改為min-width。

/* Left column */
.leftcolumn {   
  float: left;
  width: 100%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 100%;
  background-color: #f1f1f1;
  padding: 0;
}
@media screen and (min-width: 800px) {
  .leftcolumn {   
    width: 75%;
  }
  .rightcolumn {
    width: 25%;
    padding-left: 20px;
  }
}

你可以試著自行將.topnav也修改一下，要注意，width如果沒有特別指定便是auto，另外，我發(fā)現(xiàn)原本例子采用的400px作為斷點(diǎn)，換成min-width之后沒有反應(yīng)，需要改為500px。具體原因，我也不太確定，如果你知道的話，歡迎告知。

我開了一個(gè)GitHub的倉(cāng)庫(kù)專門放W3Schools系列的代碼，要查看Mobile First版的代碼請(qǐng)移步：W3Schools GitHub

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117415.html

相關(guān)文章

  • Flexbox響應(yīng)式網(wǎng)頁(yè)布局 - W3Schools視頻02

    摘要：今日繼續(xù)響應(yīng)式網(wǎng)頁(yè)布局的實(shí)現(xiàn)，采用方案。有經(jīng)驗(yàn)的前端或多或少已經(jīng)接觸過這個(gè)網(wǎng)站，因?yàn)樗?jīng)常出現(xiàn)在搜索結(jié)果的前幾項(xiàng)。因此我想做一系列的影片專門介紹這些。 今日繼續(xù)W3Schools響應(yīng)式網(wǎng)頁(yè)布局的實(shí)現(xiàn)，采用Flexbox方案。使用Flexbox實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)布局是目前最流行的做法。如果你對(duì)Flexbox并不熟悉，可以查看W3Schools的教學(xué)： W3Schools Flexbox教學(xué)...

    codecraft 評(píng)論0 收藏0

  • CSS Grid響應(yīng)式網(wǎng)頁(yè)布局 - W3Schools視頻03

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

    piapia 評(píng)論0 收藏0

  • CSS Grid響應(yīng)式網(wǎng)頁(yè)布局 - W3Schools視頻03

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

    leejan97 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<