响应式网页设计中5个必备的技术

使用用于访问互联网的设备（电脑，平板电脑，智能手机的增殖……）你要确保你的网站将在每个设备可能看起来很好。在这篇文章中，我已经编译5超级有用的技术更好的，更敏感的网站或Web应用程序。

响应图像

流体的图像是一个敏感的设计的一个重要方面。幸福，使你的图片的流体是很容易做到的。下面的CSS代码将确保图像尽可能大的。例如，如果图像在一个600px宽集装箱显示，图像将600px。resize容器350px，和图像会自动调整到可用的最大宽度为350像素，在这种情况下。

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

HTML5视频响应

作为HTML5规范允许你容易地嵌入视频在您的网页，为什么不使用它？HTML5视频制作响应太容易：只需添加以下你的CSS文件，你去好！

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

YouTube视频响应

我只是告诉你，没有什么复杂的图像或视频制作HTML5的响应。但对于视频网站的流行？事实上，YouTube是最流行的网络视频主持人，所以你可能会做一个YouTube视频有一天。

首先，考虑这个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/

响应的导航菜单

导航菜单是最简单的方式为用户快速找到他们想要的东西在您的网站。但当浏览一个网站的移动设备上的导航菜单，往往无法或很难使用。事实上，对于较小的显示器，它是更好的方式来使用<选择>而不是传统的横向菜单的下拉菜单。

这里有一个简单的你可以在任何地点实现技术。让我们与HTML的开始，我们将创建两个菜单：标准显示菜单，和<ul>下拉菜单的移动设备：

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。没有什么复杂的：我们隐藏<选择>默认情况下，只显示如果文档宽度小于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

响应数据表

表和响应的设计一般不适合在一起很好。但这是一个非常有用的技术天才开发者克里斯Coyier来帮助您创建响应表。

让我们创建一个基本的表开始。这里的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. }

现在我们有一个表，其基本的造型，让我们的表的响应。我们要做的是迫使表不表现得像一个表的每一个表设置相关的元素是块级。然后通过保持我们最初加入斑马条纹，就像每个表列成表本身，但只有宽屏幕。没有更多的水平滚动！然后为每个“细胞”，我们将使用CSS生成的内容（：前）应用的标签，所以我们知道的每一位数据意味着什么。

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