一個網站只在桌面屏幕上好看是遠遠不夠的,同時也要在平板電腦和智能手機中能夠良好呈現。響應式的網站是指它能夠適應客戶端的屏幕尺寸,自動響應客戶端尺寸變化。在這篇文章中,我將向您展示如何通過3個簡單的步驟輕鬆地使網站變成響應式(Responsive)。
1 – 佈局
當創建一個響應式網站,或讓現有的網站變成響應式的,首先要關注的元素的佈局。我在建立響應式的網站,總是先創建一個非響應的佈局,頁面寬度固定大小。如果非響應版本完成得非常不錯,我再添加媒體查詢(Media Queries)和響應式代碼。這種操作方式更容易實現響應式特性,在同一時間專注於一個任務。
當你已經完成了無響應的網站,做的第一件事是在你的 HTML 頁面,粘貼下面的代碼到<head>和</head>標籤之間。這將設置屏幕按1:1的尺寸顯示,在 iPhone 和其他智能手機的瀏覽器提供網站全視圖瀏覽,並禁止用戶縮放頁面。
- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="HandheldFriendly" content="true">
- /* Tablet Landscape */
- @media screen and (max-width: 1060px) {
- #primary { width:67%; }
- #secondary { width:30%; margin-left:3%;}
- }
- /* Tabled Portrait */
- @media screen and (max-width: 768px) {
- #primary { width:100%; }
- #secondary { width:100%; margin:0; border:none; }
- }
2 、媒體
一個響應式的佈局是實現響應網站的第一步。現在,讓我們把注意力集中在另外一個現代化網站非常重要的方面:媒體,如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠不會大於他們的父容器,代碼非常簡單,適用於大多數網站。請注意,IE6 等舊的瀏覽器不支持 max-width 指令。
- img { max-width: 100%; }
- <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
正如你可以看到,我們使用 data-* 屬性來存儲替換圖像的 URL。現在,讓我們使用強大的CSS3 來爲匹配 min-device-width 條件的媒體指定替換圖像:
- @media (min-device-width:600px) {
- img[data-src-600px] {
- content: attr(data-src-600px, url);
- }
- }
- @media (min-device-width:800px) {
- img[data-src-800px] {
- content: attr(data-src-800px, url);
- }
- }
HTML:
- <div class="video-container">
- <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></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%;
- }
3 – 字體
本教程的最後一步絕對非常重要,但往往被網站開發人員忽視——字體。到現在爲止,大多數開發人員(包括我自己)使用像素來定義字體的大小。雖然像素在普通網站使用是OK的,但是對於響應式網站來說應該有響應式的字體。事實上,一個響應式的字體大小應關聯它的父容器的寬度,這樣它纔可以適應客戶端的屏幕。
- html { font-size:100%; }
完成後,您可以定義響應式的字體大小,如下所示:
- @media (min-width: 640px) { body {font-size:1rem;} }
- @media (min-width:960px) { body {font-size:1.2rem;} }
- @media (min-width:1100px) { body {font-size:1.5rem;} }