《實用技巧》—讓你的網站變成響應式的3個簡單步驟

時間 2019-12-14

原文原文鏈接

現在，一個網站只在桌面屏幕上好看是遠遠不夠的，同時也要在平板電腦和智能手機中可以良好呈現。響應式的網站是指它可以適應客戶端的屏幕尺寸，自動響應客戶端尺寸變化。在這篇文章中，我將向您展現如何經過3個簡單的步驟輕鬆地使網站變成響應式（Responsive）。
1 – 佈局
　　當建立一個響應式網站，或讓現有的網站變成響應式的，首先要關注的元素的佈局。我在創建響應式的網站，老是先建立一個非響應的佈局，頁面寬度固定大小。若是非響應版本完成得很是不錯，我再添加媒體查詢（Media Queries）和響應式代碼。這種操做方式更容易實現響應式特性，在同一時間專一於一個任務。
　　當你已經完成了無響應的網站，作的第一件事是在你的 HTML 頁面，粘貼下面的代碼到<head>和</head>標籤之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其餘智能手機的瀏覽器提供網站全視圖瀏覽，並禁止用戶縮放頁面。
php

<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">

如今是時候添加一些媒體查詢了。根據 W3C 網站，媒體查詢由媒體類型和零個或多個媒體查詢的條件表達式組成。經過使用媒體查詢，外觀呈現能夠針對特定範圍內的輸出設備，而不須要改變內容自己。換句話說，媒體查詢讓您的網站在各類各類顯示器上看起來都很好，從小的智能手機到大的電腦屏幕等等。

　　媒體查詢取決於你的網站佈局，因此對我來講爲您提供一個現成可使用的代碼片斷有點困難。可是，下面的代碼對於大多數網站都是一個很好的起點。在這個例子中，#primary 是主要內容區域，#secondary 是側欄。

　　從代碼中你能夠看到，我定義了兩種規格：首先有一個最大寬度爲1060px，爲平板電腦優化的橫向顯示。#primary 佔在其父容器寬度的67%，#senondary 佔30%，再加上3%的左外邊距。第二個規格是用於平板電腦和更小的屏幕尺寸。

　　因爲智能手機的屏幕尺寸小，我決定給 #primary 設置100%的寬度，#secondary 也設置100%的寬度，他將在 #primary 下面。正如我已經說過的，你可能必需要對這段代碼位進行修改才能適應您的網站的具體需求。

/* 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; }
}

完成之後，讓咱們看看你的佈局是如何響應的。要作到這一點，我用這 Matt Kersley 建立的一款很是的響應式測試工具。
2 、媒體
　　一個響應式的佈局是實現響應網站的第一步。如今，讓咱們把注意力集中在另一個現代化網站很是重要的方面：媒體，如視頻或圖像。下面的 CSS 代碼將確保您的圖像將永遠不會大於他們的父容器，代碼很是簡單，適用於大多數網站。請注意，IE6 等舊的瀏覽器不支持 max-width 指令。

img { max-width: 100%; }

雖然上述技術是有效的，有時你可能須要有更多的圖像控制權，例如根據客戶端的顯示大小，顯示不一樣的圖像。

　　這是由 Nicolas Gallagher 發明的好方法。讓咱們看看 HTML：

<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);
}
}

使人印象深入，是否是？如今，讓咱們來看看另外一個在今天的網站中很是重要的媒體——視頻。因爲大多數網站使用的視頻來自第三方網站，我決定把重點放在 Nick La 的彈性視頻技術，這種技術可以讓您嵌入的響應式的視頻。
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%;
}

在你的網站上應用了這些代碼後，嵌入的視頻也是響應式（Responsive）的了。

3 – 字體

本教程的最後一步絕對很是重要，但每每被網站開發人員忽視——字體。到如今爲止，大多數開發人員（包括我本身）使用像素來定義字體的大小。雖然像素在普通網站使用是OK的，可是對於響應式網站來講應該有響應式的字體。事實上，一個響應式的字體大小應關聯它的父容器的寬度，這樣它才能夠適應客戶端的屏幕。

　　 CSS3 規範引入了一個新的單位叫 rem，和 em 類類似，但相對於 HTML 元素來講， rem 更易於使用。

　　 rem 是相對於 HTML 元素的，不要忘了重置 HTML 的字體大小：