響應(yīng)式網(wǎng)頁設(shè)計(jì)中5個(gè)必備的技術(shù)

使用用于訪問互聯(lián)網(wǎng)的設(shè)備（電腦，平板電腦，智能手機(jī)的增殖……）你要確保你的網(wǎng)站將在每個(gè)設(shè)備可能看起來很好。在這篇文章中，我已經(jīng)編譯5超級(jí)有用的技術(shù)更好的，更敏感的網(wǎng)站或Web應(yīng)用程序。

響應(yīng)圖像

流體的圖像是一個(gè)敏感的設(shè)計(jì)的一個(gè)重要方面。幸福，使你的圖片的流體是很容易做到的。下面的CSS代碼將確保圖像盡可能大的。例如，如果圖像在一個(gè)600px寬集裝箱顯示，圖像將600px。resize容器350px，和圖像會(huì)自動(dòng)調(diào)整到可用的最大寬度為350像素，在這種情況下。

1. img {
2.      max-width: 100%;
3. }

HTML5視頻響應(yīng)

作為HTML5規(guī)范允許你容易地嵌入視頻在您的網(wǎng)頁，為什么不使用它？HTML5視頻制作響應(yīng)太容易：只需添加以下你的CSS文件，你去好！

1. video {
2.     max-width: 100%;
3.     height: auto;
4. }

YouTube視頻響應(yīng)

我只是告訴你，沒有什么復(fù)雜的圖像或視頻制作HTML5的響應(yīng)。但對(duì)于視頻網(wǎng)站的流行？事實(shí)上，YouTube是最流行的網(wǎng)絡(luò)視頻主持人，所以你可能會(huì)做一個(gè)YouTube視頻有一天。

首先，考慮這個(gè)HTML代碼：

1. <div>
2.          <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
3. </div>

然后，將它添加到你的CSS文件：

1. .video-container {
2.     position: relative;
3.     padding-bottom: 56.25%;
4.     padding-top: 30px; height: 0; overflow: hidden;
5. }
6.  
7. .video-container iframe,
8. .video-container object,
9. .video-container embed {
10.     position: absolute;
11.     top: 0;
12.     left: 0;
13.     width: 100%;
14.     height: 100%;
15. }

此代碼還工作在Vimeo視頻，如下圖所示：

Source: http://avexdesigns.com/responsive-youtube-embed/

響應(yīng)的導(dǎo)航菜單

導(dǎo)航菜單是最簡(jiǎn)單的方式為用戶快速找到他們想要的東西在您的網(wǎng)站。但當(dāng)瀏覽一個(gè)網(wǎng)站的移動(dòng)設(shè)備上的導(dǎo)航菜單，往往無法或很難使用。事實(shí)上，對(duì)于較小的顯示器，它是更好的方式來使用<選擇>而不是傳統(tǒng)的橫向菜單的下拉菜單。

這里有一個(gè)簡(jiǎn)單的你可以在任何地點(diǎn)實(shí)現(xiàn)技術(shù)。讓我們與HTML的開始，我們將創(chuàng)建兩個(gè)菜單：標(biāo)準(zhǔn)顯示菜單，和<ul>下拉菜單的移動(dòng)設(shè)備：

1. <nav>
2.  
3.   <ul>
4.     <li><a href="/" rel="external nofollow" >Home</a></li>
5.     <li><a href="/collections/all" rel="external nofollow" >Books</a></li>
6.     <li><a href="/blogs/five-simple-steps-blog" rel="external nofollow" >Blog</a></li>
7.     <li><a href="/pages/about-us" rel="external nofollow" >About Us</a></li>
8.     <li><a href="/pages/support" rel="external nofollow" >Support</a></li>
9.   </ul>
10.  
11.   <select>
12.     <option value="" selected="selected">Select</option>
13.  
14.     <option value="/">Home</option>
15.     <option value="/collections/all">Books</option>
16.     <option value="/blogs/five-simple-steps-blog">Blog</option>
17.     <option value="/pages/about-us">About Us</option>
18.     <option value="/pages/support">Support</option>
19.   </select>
20.  
21. </nav>

這里是CSS。沒有什么復(fù)雜的：我們隱藏<選擇>默認(rèn)情況下，只顯示如果文檔寬度小于960px.。

1. nav select {
2.   display: none;
3. }
4.  
5. @media (max-width: 960px) {
6.   nav ul     { display: none; }
7.   nav select { display: inline-block; }
8. }

Source: http://css-tricks.com/convert-menu-to-dropdown

響應(yīng)數(shù)據(jù)表

表和響應(yīng)的設(shè)計(jì)一般不適合在一起很好。但這是一個(gè)非常有用的技術(shù)天才開發(fā)者克里斯Coyier來幫助您創(chuàng)建響應(yīng)表。

讓我們創(chuàng)建一個(gè)基本的表開始。這里的HTML…

1. <table>
2.     <thead>
3.     <tr>
4.         <th>First Name</th>
5.         <th>Last Name</th>
6.         <th>Job Title</th>
7.     </tr>
8.     </thead>
9.     <tbody>
10.     <tr>
11.         <td>James</td>
12.         <td>Matman</td>
13.         <td>Chief Sandwich Eater</td>
14.     </tr>
15.     <tr>
16.         <td>The</td>
17.         <td>Tick</td>
18.         <td>Crimefighter Sorta</td>
19.     </tr>
20.     </tbody>
21. </table>

和CSS：

1. /*
2. Generic Styling, for Desktops/Laptops
3. */
4. table {
5.   width: 100%;
6.   border-collapse: collapse;
7. }
8. /* Zebra striping */
9. tr:nth-of-type(odd) {
10.   background: #eee;
11. }
12. th {
13.   background: #333;
14.   color: white;
15.   font-weight: bold;
16. }
17. td, th {
18.   padding: 6px;
19.   border: 1px solid #ccc;
20.   text-align: left;
21. }

現(xiàn)在我們有一個(gè)表，其基本的造型，讓我們的表的響應(yīng)。我們要做的是迫使表不表現(xiàn)得像一個(gè)表的每一個(gè)表設(shè)置相關(guān)的元素是塊級(jí)。然后通過保持我們最初加入斑馬條紋，就像每個(gè)表列成表本身，但只有寬屏幕。沒有更多的水平滾動(dòng)！然后為每個(gè)“細(xì)胞”，我們將使用CSS生成的內(nèi)容（：前）應(yīng)用的標(biāo)簽，所以我們知道的每一位數(shù)據(jù)意味著什么。

1. @media
2. only screen and (max-width: 760px),
3. (min-device-width: 768px) and (max-device-width: 1024px)  {
4.  
5.     /* Force table to not be like tables anymore */
6.     table, thead, tbody, th, td, tr {
7.         display: block;
8.     }
9.  
10.     /* Hide table headers (but not display: none;, for accessibility) */
11.     thead tr {
12.         position: absolute;
13.         top: -9999px;
14.         left: -9999px;
15.     }
16.  
17.     tr { border: 1px solid #ccc; }
18.  
19.     td {
20.         /* Behave  like a "row" */
21.         border: none;
22.         border-bottom: 1px solid #eee;
23.         position: relative;
24.         padding-left: 50%;
25.     }
26.  
27.     td:before {
28.         /* Now like a table header */
29.         position: absolute;
30.         /* Top/left values mimic padding */
31.         top: 6px;
32.         left: 6px;
33.         width: 45%;
34.         padding-right: 10px;
35.         white-space: nowrap;
36.     }
37.  
38.     /*
39.     Label the data
40.     */
41.     td:nth-of-type(1):before { content: "First Name"; }
42.     td:nth-of-type(2):before { content: "Last Name"; }
43.     td:nth-of-type(3):before { content: "Job Title"; }
44.     td:nth-of-type(4):before { content: "Favorite Color"; }
45.     td:nth-of-type(5):before { content: "Wars of Trek?"; }
46.     td:nth-of-type(6):before { content: "Porn Name"; }
47.     td:nth-of-type(7):before { content: "Date of Birth"; }
48.     td:nth-of-type(8):before { content: "Dream Vacation City"; }
49.     td:nth-of-type(9):before { content: "GPA"; }
50.     td:nth-of-type(10):before { content: "Arbitrary Data"; }
51. }

Source: http://css-tricks.com/responsive-data-tables