響應(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像素,在這種情況下。
- img {
- max-width: 100%;
- }
HTML5視頻響應(yīng)
作為HTML5規(guī)范允許你容易地嵌入視頻在您的網(wǎng)頁,為什么不使用它?HTML5視頻制作響應(yīng)太容易:只需添加以下你的CSS文件,你去好!
- video {
- max-width: 100%;
- height: auto;
- }
YouTube視頻響應(yīng)
我只是告訴你,沒有什么復(fù)雜的圖像或視頻制作HTML5的響應(yīng)。但對(duì)于視頻網(wǎng)站的流行?事實(shí)上,YouTube是最流行的網(wǎng)絡(luò)視頻主持人,所以你可能會(huì)做一個(gè)YouTube視頻有一天。
首先,考慮這個(gè)HTML代碼:
- <div>
- <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
- </div>
然后,將它添加到你的CSS文件:
- .video-container {
- position: relative;
- padding-bottom: 56.25%;
- padding-top: 30px; height: 0; overflow: hidden;
- }
- .video-container iframe,
- .video-container object,
- .video-container embed {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
此代碼還工作在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è)備:
- <nav>
- <ul>
- <li><a href="/" rel="external nofollow" >Home</a></li>
- <li><a href="/collections/all" rel="external nofollow" >Books</a></li>
- <li><a href="/blogs/five-simple-steps-blog" rel="external nofollow" >Blog</a></li>
- <li><a href="/pages/about-us" rel="external nofollow" >About Us</a></li>
- <li><a href="/pages/support" rel="external nofollow" >Support</a></li>
- </ul>
- <select>
- <option value="" selected="selected">Select</option>
- <option value="/">Home</option>
- <option value="/collections/all">Books</option>
- <option value="/blogs/five-simple-steps-blog">Blog</option>
- <option value="/pages/about-us">About Us</option>
- <option value="/pages/support">Support</option>
- </select>
- </nav>
這里是CSS。沒有什么復(fù)雜的:我們隱藏<選擇>
默認(rèn)情況下,只顯示如果文檔寬度小于960px.。
- nav select {
- display: none;
- }
- @media (max-width: 960px) {
- nav ul { display: none; }
- nav select { display: inline-block; }
- }
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…
- <table>
- <thead>
- <tr>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Job Title</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>James</td>
- <td>Matman</td>
- <td>Chief Sandwich Eater</td>
- </tr>
- <tr>
- <td>The</td>
- <td>Tick</td>
- <td>Crimefighter Sorta</td>
- </tr>
- </tbody>
- </table>
和CSS:
- /*
- Generic Styling, for Desktops/Laptops
- */
- table {
- width: 100%;
- border-collapse: collapse;
- }
- /* Zebra striping */
- tr:nth-of-type(odd) {
- background: #eee;
- }
- th {
- background: #333;
- color: white;
- font-weight: bold;
- }
- td, th {
- padding: 6px;
- border: 1px solid #ccc;
- text-align: left;
- }
現(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ù)意味著什么。
- @media
- only screen and (max-width: 760px),
- (min-device-width: 768px) and (max-device-width: 1024px) {
- /* Force table to not be like tables anymore */
- table, thead, tbody, th, td, tr {
- display: block;
- }
- /* Hide table headers (but not display: none;, for accessibility) */
- thead tr {
- position: absolute;
- top: -9999px;
- left: -9999px;
- }
- tr { border: 1px solid #ccc; }
- td {
- /* Behave like a "row" */
- border: none;
- border-bottom: 1px solid #eee;
- position: relative;
- padding-left: 50%;
- }
- td:before {
- /* Now like a table header */
- position: absolute;
- /* Top/left values mimic padding */
- top: 6px;
- left: 6px;
- width: 45%;
- padding-right: 10px;
- white-space: nowrap;
- }
- /*
- Label the data
- */
- td:nth-of-type(1):before { content: "First Name"; }
- td:nth-of-type(2):before { content: "Last Name"; }
- td:nth-of-type(3):before { content: "Job Title"; }
- td:nth-of-type(4):before { content: "Favorite Color"; }
- td:nth-of-type(5):before { content: "Wars of Trek?"; }
- td:nth-of-type(6):before { content: "Porn Name"; }
- td:nth-of-type(7):before { content: "Date of Birth"; }
- td:nth-of-type(8):before { content: "Dream Vacation City"; }
- td:nth-of-type(9):before { content: "GPA"; }
- td:nth-of-type(10):before { content: "Arbitrary Data"; }
- }
本文地址:http://m.likemindfilms.com/tutorial/wd1925.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏