谷歌Web中文開發手冊：3響應式

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

（譯者注：全部按照教程的代碼，並不能實現代碼，我調試之後發了全部代碼出來。ps：沒有使用翻牆工具，谷歌給的例子訪問不到。）

代碼地址：http://download.csdn.net/detail/wowkk/7522475

每個設備都有自己獨特的優勢和限制，要讓這個網頁在衆多的不同的顯示設備中被接受，作爲一名Web開發者，你要盡力讓這個頁面支持所有設備。

添加viewport
應用簡單樣式
設置第一個斷點
限制最大寬度的設計
改變間距和文字大小
讓元素自適應
小結

前一篇教程已經把頁面的基本內容填充好了，這一篇我們會將裝飾它，並且讓它做一系列不同分辨率的設備中都能夠漂亮地顯示。

依照移動優先的開發原則，我們從窄屏入手——類似手機——並且先建立起這方面的概念，然後再逐漸向大屏幕擴展。我們可以通過判斷視窗寬度來實現不同的設計和佈局。

早先我們創建了一對不同級別的設計定義內容如何來顯示，現在我們需要頁面適應不同的佈局。我們需要設置一下斷點——用與決定何時改變佈局和風格——基於內容如何來適應不同的屏幕分辨率。

使用viewport

從窄屏開始然後逐級擴展

根據斷點觸發讓內容去適應分辨率

根據主要斷點創建高級別佈局版本

添加viewport

就算是最簡單的頁面，也要加入viewport標籤，它是你開發多設備支持經驗的關鍵。沒有它，你的網站是不能在移動設備上有個好的表現的。

引入viewport會讓瀏覽器認爲頁面需要縮放以適應屏幕。有很多種配置方案，我們默認這樣設置：（在<head>裏聲明一次即可）

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

應用簡單樣式

我們的產品和公司經常需要一個特別的廣告並且支持不同的風格。

風格引導

風格引導能夠有效地讓訪客對頁面有一個高層次的認識並且確保你在設計上是統一的。

Colors

#39b1a4

#ffffff

#f5f5f5

#e9e9e9

#dc4d38

添加裝飾圖片

在前面的教程中，我們添加了“內容圖片”，這些對於描述我們產品很重要。“裝飾圖片”不是內容所必須要的，但添加之後可以使訪客更加關注我們的產品。

舉個例子。帶圖片的標題可以引誘訪客去閱讀更多關於產品的內容。

可以很簡單地應用，我們這裏直接使用背景圖片。應用一個簡單的CSS方式。

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

選擇一個簡單的“模糊”（虛化）的背景圖片可以讓文字閱讀變得簡單。設置background-size : cover;可以保證圖片正常的縱橫比。

設置第一個斷點

現在的設計，在視圖寬度達到600px之後就變得有點難看了。我們的想法是，每行的文字長度不要超過10個（最佳閱讀長度）。這就是我們接下來想改變的。

【目前的情況是，每行文字的長度會隨着視圖寬度增加而增加】

600px是一個比較好的斷點，我們用“媒體查詢”的技術來實現。

@media (min-width: 600px) {
}

這樣有更大的空間去讓頁面適應更大的視圖窗口。

提示：你不用重新設置所有元素，只要對應做一些調整即可。

我們需要做的：

約束設計的最大寬度；

改變元素的padding屬性並且修改字體大小；

讓註冊表單浮動在標題簡介裏；

讓視頻浮動於主體內容；

降低圖片大小並且以表格形式展示。

約束設計的最大寬度

只有兩個主要佈局：一個窄視圖和一個寬視圖，這樣可以簡化我們的構建過程。

現在我們不想考慮更大寬度的視圖會再有不同的佈局，讓寬度超過800px時，內容樣式將不再變化。那可以添加多一個div，放在某模塊裏面，應用一個margin : auto;讓它居中顯示。

<div id="section1">
      <div class="container">
        <h2>What will I learn?</h2>
 
 
.container {
      margin: auto;
      max-width: 800px;
    }

改變元素的padding屬性並且修改字體大小

在窄視圖中，我們沒有足夠的空間去顯示內容，所以只能降低元素大小。

在較大的視圖中，我們就得考慮到訪客離屏幕較遠的情形，所以需要把元素增大，並且加大元素間的距離。

在我們的產品頁中，我們讓元素和邊界保持5%寬度的距離並且增大元素大小，來解決這個問題。

#headline {
      padding: 20px 5%;
   }

讓元素適應寬視圖

窄視圖只是簡單線性地從上往下排布模塊，但寬視圖給了我們更多的空間去展示模塊內容。在我們產品頁中可以這麼來做：

讓“註冊表單”圍繞着“簡介”；

將“視頻”定位到“關鍵點”的右邊；

鋪排“圖片”；

擴展“表格”。

浮動“表單”

現在我們有更多的空間，那就得打破原有的佈局方式，更有效地使用水平上的空間。

#headline #blurb {
      float: left;
      font-weight: 200;
      width: 50%;
      font-size: 18px;
      box-sizing: border-box;
      padding-right: 10px;
    }

    #headline #register {
      float:right;
      padding: 20px;
      width: 50%;
      box-sizing: border-box;
      font-weight: 300;
    }

#headline {
      padding: 20px 5%;
    }

浮動“視頻”

在窄視圖中，“視頻”寬度是100%，並且排布在“關鍵點”之後。在寬視圖中，這樣做會讓視頻顯得太大，失真。

所以“視頻”需要在窄視圖的垂直流排布中脫離出來，並排與“詳情”顯示。

 #section1 ul {
      box-sizing: border-box;
      float: left;
      width: 50%;
      padding-right: 1em;
    }
    
    #section1 video {
      width: 50%;
      float: right;
    }

鋪排圖片

在窄視圖中，圖片也經常是佔滿屏幕然後垂直排布的，這在寬視圖中肯定是不行的。

爲了讓圖片看起更有條理性，我們將它們寬度設置爲30%，並列。然後加點邊框看起來吸引人一點。

 #section2 div img {
       width: 30%;
       margin: 1%;
       box-sizing: border-box;
       border-radius: 50% 50%;
       box-shadow: black 0px 0px 5px;
     }

讓圖片響應

使用圖片時，要考慮到當前的視圖的像素大小。

這個web建立在96dpi的屏幕。而現在的設備像素密度越來越高，這樣的話，原本適合在96dpi顯示的圖片，在高dpi設備上的顯示效果將變得很糟糕。

有一個方法現在還不是經常應用到。如果瀏覽器支持的話，你可以在高密度像素的窗口對應顯示高像素密度的圖片。

<img src="photo.png" srcset="[email protected] 2x">

表格

表格很難在窄視圖中表達，需要用比較特殊的方式。

在窄視圖中，我們的表格只有兩列，然後隨着視圖寬度變大而發生變化。

我們要爲表格專門設置一個斷點。爲移動優先原則建表格時，很難去撤銷所應用的樣式，所以得爲窄視圖專門的CSS，來靈活處理。

 @media screen and (max-width: 600px) {
      table thead {
        display: none;
      }

      table td {
        display: block;
        position: relative;
        padding-left: 50%;
        padding-top: 13px;
        padding-bottom: 13px;
        text-align: left;
        background: #e9e9e9;
      }

      table td:before {
        content: attr(data-th) " :";
        display: inline-block;
        color: #000000;
        background: #e9e9e9;
        border-right: 2px solid transparent;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 33%;
        max-height: 100%;

        font-size: 16px;
        font-weight: 300;
        padding-left: 13px;
        padding-top: 13px;
      }
    }

小結

恭喜，現在你已經創建了第一個簡單的可以適應在不同分辨率設備中的產品頁面。

依照下面的提示，你將有個更好的開始：

01 創建一個基礎的“信息架構”並且在編碼之前理清楚你要表達的內容。

02 一定使用viewport標誌

03 創立你基礎的移動優先的經驗

04 當你有這些經驗後，就可以添加更多的斷點來適應更多不同寬度的視圖。

05 保持迭代

<!doctype html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            CS256: Mobile Web development - structure
        </title>
        <style>
            #headline { padding: 0.8em; background-image: url(img/back.jpg); background-size:
            cover; } #section2 div img { width: 80%; margin: 1%; } @media (min-width:
            600px) { #headline { overflow:hidden; padding: 20px 5%; } #headline #blurb
            { float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing:
            border-box; padding-right: 10px; } #headline #register { float:right; padding:
            20px; width: 50%; box-sizing: border-box; font-weight: 300; } .container
            { margin: auto; max-width: 800px; } #section1{ overflow:hidden; } #section1
            ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em;
            } #section1 video { width: 50%; float: right; } #section2 div img { width:
            30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow:
            black 0px 0px 5px; } } @media screen and (max-width: 600px) { #section3{
            overflow: hidden; } table{ width: 100%; } table thead { display: none;
            } table td { display: block; position: relative; padding-left: 50%; padding-top:
            13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table
            td:before { content: attr(data-th) " :"; display: inline-block; color:
            #000000; background: #e9e9e9; border-right: 2px solid transparent; position:
            absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size:
            16px; font-weight: 300; padding-left: 13px; padding-top: 13px; } }
        </style>
    </head>
    
    <body>
        <div id="headline">
            <h1>
                移動頁面開發
            </h1>
            <h2>
                開發移動頁面的經驗
            </h2>
            <div id="blurb">
                <p>
                    你已經聽說過移動端適應是個大問題，而且你也不知道怎樣將傳統的桌面網站轉換成爲一個快速的、有效的多屏幕適應的Web App
                </p>
                <p>
                    做這個教程就是用來教Web開發者關於如何積累這些技術和經驗的。
                </p>
                <p>
                    這個教程會首先注重“移動優先”的Web App，要保證先在以下設備中正常表現：
                </p>
                <ul>
                    <li>
                        Android,
                        <li>
                            iOS,
                            <li>
                                and others.
                </ul>
            </div>
            <form method="post" id="register">
                <h2>
                    Register for the launch
                </h2>
                <div>
                    <label for="name">
                        名字
                    </label>
                    <input type="text" name="name" id="name" placeholder="張三" required>
                </div>
                <div>
                    <label for="email">
                        郵箱
                    </label>
                    <input type="email" name="email" id="email" placeholder="[email protected]"
                    required>
                </div>
                <div>
                    <label for="tel">
                        電話
                    </label>
                    <input type="tel" name="tel" id="tel" placeholder="18888888888" required>
                </div>
                <input type="submit" value="註冊">
            </form>
        </div>
        <div id="section1">
            <div class="container">
                <h2>
                    我可以學到什麼？
                </h2>
                <p>
                    完成課程之後，你可以開發一個高水平的Web App
                </p>
                <p>
                    你可以學到以下幾點
                </p>
                <ul>
                    <li>
                        開發一個完美的能在移動設備流量的網站
                    </li>
                    <li>
                        使用各種工具去測試這個網站的表現
                    </li>
                    <li>
                        將這種技術應用到你未來的項目
                    </li>
                </ul>
                <video controls poster="img/product.jpg">
                    <source src="video/product.mp4" type="video/mp4">
                    </source>
                    <source src="video/product.webm" type="video/webm">
                    </source>
                    <p>
                        抱歉！您的瀏覽器無法播放該視頻。
                        <a href="udacity.mov">
                            請點擊這裏下載。
                        </a>
                        .
                    </p>
                </video>
                <br>
            </div>
        </div>
        <div id="section2">
            <h2>
                指導老師
            </h2>
            <p>
                移動行業領先者
            </p>
            <div id="images">
                <img src="img/p1.jpg" alt="Mp1" srcset="[email protected] 2x">
                <img src="img/p2.jpg" alt="Mp2" srcset="[email protected] 2x">
                <img src="img/p3.jpg" alt="Mp3" srcset="[email protected] 2x">
            </div>
            <br>
        </div>
        <div id="section3">
            <h2>
                我爲什麼要擔心移動設備的反應？
            </h2>
            <p>
                它們太普及了！
            </p>
            <table>
                <caption>
                    <p>
                        數據來自
                        <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">
                            StatsCounter
                        </a>
                    </p>
                </caption>
                <thead>
                    <tr>
                        <th>
                            國家
                        </th>
                        <th>
                            桌面分享
                        </th>
                        <th>
                            平板分享
                        </th>
                        <th>
                            手機分享
                        </th>
                    </tr>
                </thead>
                <colgroup>
                    <col span="1">
                        <col span="1">
                            <col span="1">
                                <col span="1">
                </colgroup>
                <tbody>
                    <tr>
                        <td data-th="Country">
                            <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">
                                印度
                            </a>
                        </td>
                        <td data-th="Desktop share">
                            32%
                        </td>
                        <td data-th="Tablet share">
                            1%
                        </td>
                        <td data-th="Mobile share">
                            67%
                        </td>
                    </tr>
                    <tr>
                        <td data-th="Country">
                            <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">
                                大不列顛
                            </a>
                        </td>
                        <td data-th="Desktop share">
                            69%
                        </td>
                        <td data-th="Tablet share">
                            13%
                        </td>
                        <td data-th="Mobile share">
                            18%
                        </td>
                    </tr>
                    <tr>
                        <td data-th="Country">
                            <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">
                                美國
                            </a>
                        </td>
                        <td data-th="Desktop share">
                            69%
                        </td>
                        <td data-th="Tablet share">
                            9%
                        </td>
                        <td data-th="Mobile share">
                            22%
                        </td>
                    </tr>
                    <tr>
                        <td data-th="Country">
                            <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">
                                中國
                            </a>
                        </td>
                        <td data-th="Desktop share">
                            86%
                        </td>
                        <td data-th="Tablet share">
                            4%
                        </td>
                        <td data-th="Mobile share">
                            10%
                        </td>
                    </tr>
                </tbody>
            </table>
            <br>
        </div>
        <div id="footer">
            <div class="container">
                <p>
                    還是需要腳部信息的~
                </p>
            </div>
        </div>
    </body>

</html>

谷歌Web中文開發手冊：3響應式

添加viewport

應用簡單樣式

風格引導

添加裝飾圖片

設置第一個斷點

約束設計的最大寬度

改變元素的padding屬性並且修改字體大小

讓元素適應寬視圖

浮動“表單”

浮動“視頻”

鋪排圖片

讓圖片響應

表格

小結

linux安裝cuda和cudnn

模擬手機設備：使用 Playwright 實現移動端自動化測試

Mellanox網卡開啓SR-IOV

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

我拍了拍Redis，被移出了羣聊···

網絡現代化通向雲原生應用的高速公路

面試官：說說你對序列化的理解

我宣佈，這是我找到的史上AI最全論文體系！

短工邦技術部博客開通拉

如果我來應聘產品經理崗位（二）

2016--超越

如果我來應聘產品經理崗位（一）

開發者協會暑假招新方案

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結