前端實現：Medium（一）

時間 2019-11-07

標籤前端實現 medium 简体版

原文原文鏈接

本文發表於前端觀察，最新改動可訪問個人博客或是相關Github Repo。javascript

你們好，我是新人kalasoo，如今還處在「試用期」，做爲一個自學出來的前端新手，可以加入前端觀察實在是異常興奮。既然要一塊兒來維護這個關於前端的博客，我必定會努力爭取我所寫的內容能夠追上這裏文章的質量水平。做爲開始，我會作一個小小的系列來分析那些有名、特別、設計感十足或是交互體驗出衆的網站。同時我還會認真閱讀其前端代碼，爲你們重現那些神奇的效果是如何實現的，固然也會盡我所知引用更多的資源來豐富內容。但願這個系列可讓你們更加了解前端技術，同時也能夠鍛鍊我本身。css

咱們就從Medium開始

決定第一個來作這個網站的緣由很簡單，那就是好看啊！因爲Medium的出現嚴重影響改變了博客、發佈平臺的風格以及編輯器等前端組建的設計，咱們會分多期來分析各類細節是如何實現的。咱們尤總體走向局部，因此咱們先從總體佈局來分析：html

首頁佈局以及大背景圖

網站背景

Medium是由Twitter的聯合創始人：Evan Williams和Biz Stone創辦於2012年8月創辦的一個文章寫做、閱讀平臺。注意，我這裏並無用不少網站上援引的博客平臺是由於Medium的出現塑造了一種新的社會化自我營銷渠道。在首頁引入的Welcome to Medium裏，咱們看到它的初衷是爲了讓人們更好地寫做，可是做爲Twitter的一個延伸，它依舊搭載在一個社交性很強的平臺之上。這也讓在Medium中寫做的人更願意去分享、營銷、推廣本身的寫做內容，甚至成爲一些知名Developers, Designers and even Managers的發佈渠道。例如：Facebook的Product Design Director Julie Zhuo就曾經經過在Medium上發表文章來解釋Facebook爲什麼revert掉在視覺層面上很是突出的新版界面。而更讓人以爲特別的是，每當我看到好的文章分享到twitter上時，都會有做者親自來favorite你的tweet，這簡直就是自我運營啊，有木有！前端

好啦，閒話說完，咱們進入主題。java

首頁佈局

大背景圖或是視頻，已經成爲累當今服務性網站設計的一個趨勢，隨着網速愈來愈快、屏幕愈來愈大，一張巨幅首頁圖片不管從視覺衝擊力仍是從性能上都已經再也不是不可能實現的功能。那咱們來看一下這個首頁的佈局是如何實現的：jquery

HTML:git

<div class="container surface-container" id="container">
  <div class="surface" id="..." style="display: block; visibility: visible;">
    ::before
    <div class="screen-content surface-content">
      <div class="image-fill layout-fill promo-fill" ... >
        <div class="layout-fill align-middle">
          ::before
          <div class="align-block layout-fill-width">
            <div class="layout-single-column">...</div>
            <div class="align-center">...</div>
          </div>
          <footer class="footer ..."></footer>
        </div>
      </div>
    </div>
    ::after
  </div>
</div>

CSS:github

爲了實現全window的覆蓋，第一個要作的就是設置html, body的height爲100%，寬度的話，應爲是自動全覆蓋，就無需多作設置。.container只是做爲一個過分，一樣設置到100%的高度（這裏我會暫時忽略除了layout以外的屬性設置）。
再深一層是即是.surface，除了再次繼承了滿高度、滿寬度外，還定義了box-sizing: border-box;，請移位MDN來理解。這裏要注意它加了.suface:before, .surface:after的屬性，是爲了自動生成clearfix的效果來阻止float溢出，但其實在這個首頁之中並無用到。web

html, body, .container {
  height: 100%;
}
.surface {...}
.surface:before, .surface:after {
  display: table;
  content: " ";
}
.surface:after {
  clear: both;
}

在往裏面的幾個.screen-content, .surface-content只是繼續控制高度，和一些默認背景顏色。直到下面這一層才定義了覆蓋整個背景大圖的屬性，而具體的背景圖片是隻額姐加到了DOM的這個div裏面（我想緣由應該是有一些數據binding在裏面，這樣好作更新）：chrome

.image-fill, {
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.image-fill {
  background-color: rgba(0, 0, 0, 0.9);
}
.promo-fill {
  background-color: #000;
}

大背景圖

在這裏，爲了實現圖片能夠滿背景覆蓋，最主要的一個元素就是background-size: cover;，這個屬性一共有如下幾個可能的值：

background-size: <length> | <percentage> | auto | cover | contain;

它們分別表明的意思是：

background-size: 50% | 120px | auto; 設置了背景圖片的寬度，高度則自動計算。默認的auto維持了背景圖原有的大小。
background-size: 50% auto; 同時強制定義了寬度和高度。
background-size: auto, auto, [...]; 定義給多個背景圖片（注意被一個定義會用逗號隔開，與auto auto並非一個意思）。
background-size: cover; 這樣定義的背景圖片會被修改圖片大小（長寬比例不變），以確保剛恰好覆蓋整個Element。
background-size: contain; 背景圖片會被修改大小（長寬比例不變），以確保剛恰好被這個Element包裹在裏面。

下面幾張圖分別展現了集中不一樣的狀況：

當background-size設置爲cover時，即便屏幕被拉窄拉寬，圖片依舊很好地覆蓋着整個屏幕（更多的比對還能夠訪問MDN）：

contain時，圖片長寬比並不發生變化，卻會被包在window裏面：

50% 100%時，圖片長寬比按照設置的數值被拉伸：

注意，這裏的背景圖片都是按照默認的會重複鋪排在x和y軸上，因此當背景圖不能覆蓋element的時候，便會出現重複的樣式。此外，background-position: center;也定義了圖片按照所屬element的中心位置來調整大小。

兼容性

這樣圖片全頁面覆蓋的實現方法就說明完了，contain & cover屬性的兼容性以下:

Chrome 3.0+
Firefox 3.6 (1.9.2)+
IE 9.0+
Opera 10.0+
Safari 4.1+

若是爲了實現一樣的效果，卻要面對恐怖的IE7/8，腫麼破，請嘗試以下：

.background-cover {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
          src='PATH_TO_BACKGROUND_IMAGE',
          sizingMethod='scale');
  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
              src='PATH_TO_BACKGROUND_IMAGE',
              sizingMethod='scale');
}

可是要當心，這個實現方法會使得起內部的連接點擊失效（請給我大MS 32個贊），並且這個實現的是background-size: 100% 100%的效果。或者能夠經過jQuery (jquery.backgroundSize.js)來實現。