3個步驟讓你的網(wǎng)站變成響應(yīng)式網(wǎng)站
2024-03-11 分類： 網(wǎng)站建設(shè)
如今，PC、平板、智能手機等多種屏幕的適配是網(wǎng)站必須做到的，讓你的網(wǎng)站變成響應(yīng)式就非常有必要，這里向你展示如何通過3個簡單的步驟輕松地使網(wǎng)站變成響應(yīng)式。
1 – 布局
當(dāng)創(chuàng)建一個響應(yīng)式網(wǎng)站，或讓現(xiàn)有的網(wǎng)站變成響應(yīng)式的，首先要關(guān)注的元素的布局。我在建立響應(yīng)式的網(wǎng)站，總是先創(chuàng)建一個非響應(yīng)的布局，頁面寬度固定大小。如果非響應(yīng)版本完成得非常不錯，我再添加媒體查詢（Media Queries）和響應(yīng)式代碼。這種操作方式更容易實現(xiàn)響應(yīng)式特性，在同一時間專注于一個任務(wù)。
當(dāng)你已經(jīng)完成了無響應(yīng)的網(wǎng)站，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到<head>和</head>標簽之間。這將設(shè)置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶縮放頁面。
<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">
現(xiàn)在是時候添加一些媒體查詢了。根據(jù) W3C 網(wǎng)站，媒體查詢由媒體類型和零個或多個媒體查詢的條件表達式組成。通過使用媒體查詢，外觀呈現(xiàn)可以針對特定范圍內(nèi)的輸出設(shè)備，而不需要改變內(nèi)容本身。換句話說，媒體查詢讓您的網(wǎng)站在各種各種顯示器上看起來都很好，從小的智能手機到大的電腦屏幕等等。
媒體查詢?nèi)Q于你的網(wǎng)站布局，所以對我來說為您提供一個現(xiàn)成可以使用的代碼片段有點困難。但是，下面的代碼對于大多數(shù)網(wǎng)站都是一個很好的起點。在這個例子中，#primary 是主要內(nèi)容區(qū)域，#secondary 是側(cè)欄。
從代碼中你可以看到，我定義了兩種規(guī)格：首先有一個大寬度為1060px，為平板電腦優(yōu)化的橫向顯示。#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。 第二個規(guī)格是用于平板電腦和更小的屏幕尺寸。
由于智能手機的屏幕尺寸小，我決定給 #primary 設(shè)置100%的寬度，#secondary 也設(shè)置100%的寬度，他將在 #primary 下面。 正如我已經(jīng)說過的，你可能必須要對這段代碼位進行修改才能適應(yīng)您的網(wǎng)站的具體需求。
/* 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; }
}
完成以后，讓我們看看你的布局是如何響應(yīng)的。要做到這一點，我用這 Matt Kersley 創(chuàng)建的一款非常的 響應(yīng)式測試工具 。
2 、媒體
一個響應(yīng)式的布局是實現(xiàn)響應(yīng)網(wǎng)站的第一步。現(xiàn)在，讓我們把注意力集中在另外一個現(xiàn)代化網(wǎng)站非常重要的方面：媒體，如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠不會大于他們的父容器，代碼非常簡單，適用于大多數(shù)網(wǎng)站。請注意，IE6 等舊的瀏覽器不支持 max-width 指令。
img { max-width: 100%; }
雖 雖然上述技術(shù)是有效的，有時你可能需要有更多的圖像控制權(quán)，例如根據(jù)客戶端的顯示大小，顯示不同的圖像。
讓我們看看 HTML：
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
正如你可以看到，我們使用 data-* 屬性來存儲替換圖像的 URL?，F(xiàn)在，讓我們使用強大的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);
}
}
令人印象深刻，是不是？現(xiàn)在，讓我們來看看另一個在今天的網(wǎng)站中非常重要的媒體——視頻。由于大多數(shù)網(wǎng)站使用的視頻來自第三方網(wǎng)站，我決定把重點放在 Nick La的彈性視頻技術(shù)，這種技術(shù)可讓您嵌入的響應(yīng)式的視頻。
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%;
}
在 你的網(wǎng)站上應(yīng)用了這些代碼后，嵌入的視頻也是響應(yīng)式（Responsive）的了。
3 – 字體
本教程的最后一步絕對非常重要，但往往被網(wǎng)站開發(fā)人員忽視——字體。到現(xiàn)在為止，大多數(shù)開發(fā)人員（包括我自己）使用像素來定義字體的大小。雖然像素在普通網(wǎng)站使用是OK的，但是對于響應(yīng)式網(wǎng)站來說應(yīng)該有響應(yīng)式的字體。事實上，一個響應(yīng)式的字體大小應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣它才可以適應(yīng)客戶端的屏幕。
CSS3 規(guī)范引入了一個新的單位叫 rem，和 em 類相似，但相對于 HTML 元素來說， rem 更易于使用。
rem 是相對于 HTML 元素的，不要忘了重置 HTML 的字體大小：
html { font-size:100%; }
完成后，您可以定義響應(yīng)式的字體大小，如下所示：
@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;} }
1 – 布局
當(dāng)創(chuàng)建一個響應(yīng)式網(wǎng)站，或讓現(xiàn)有的網(wǎng)站變成響應(yīng)式的，首先要關(guān)注的元素的布局。我在建立響應(yīng)式的網(wǎng)站，總是先創(chuàng)建一個非響應(yīng)的布局，頁面寬度固定大小。如果非響應(yīng)版本完成得非常不錯，我再添加媒體查詢（Media Queries）和響應(yīng)式代碼。這種操作方式更容易實現(xiàn)響應(yīng)式特性，在同一時間專注于一個任務(wù)。
當(dāng)你已經(jīng)完成了無響應(yīng)的網(wǎng)站，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到<head>和</head>標簽之間。這將設(shè)置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶縮放頁面。
<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">
現(xiàn)在是時候添加一些媒體查詢了。根據(jù) W3C 網(wǎng)站，媒體查詢由媒體類型和零個或多個媒體查詢的條件表達式組成。通過使用媒體查詢，外觀呈現(xiàn)可以針對特定范圍內(nèi)的輸出設(shè)備，而不需要改變內(nèi)容本身。換句話說，媒體查詢讓您的網(wǎng)站在各種各種顯示器上看起來都很好，從小的智能手機到大的電腦屏幕等等。
媒體查詢?nèi)Q于你的網(wǎng)站布局，所以對我來說為您提供一個現(xiàn)成可以使用的代碼片段有點困難。但是，下面的代碼對于大多數(shù)網(wǎng)站都是一個很好的起點。在這個例子中，#primary 是主要內(nèi)容區(qū)域，#secondary 是側(cè)欄。
從代碼中你可以看到，我定義了兩種規(guī)格：首先有一個大寬度為1060px，為平板電腦優(yōu)化的橫向顯示。#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。 第二個規(guī)格是用于平板電腦和更小的屏幕尺寸。
由于智能手機的屏幕尺寸小，我決定給 #primary 設(shè)置100%的寬度，#secondary 也設(shè)置100%的寬度，他將在 #primary 下面。 正如我已經(jīng)說過的，你可能必須要對這段代碼位進行修改才能適應(yīng)您的網(wǎng)站的具體需求。
/* 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; }
}
完成以后，讓我們看看你的布局是如何響應(yīng)的。要做到這一點，我用這 Matt Kersley 創(chuàng)建的一款非常的 響應(yīng)式測試工具 。
2 、媒體
一個響應(yīng)式的布局是實現(xiàn)響應(yīng)網(wǎng)站的第一步。現(xiàn)在，讓我們把注意力集中在另外一個現(xiàn)代化網(wǎng)站非常重要的方面：媒體，如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠不會大于他們的父容器，代碼非常簡單，適用于大多數(shù)網(wǎng)站。請注意，IE6 等舊的瀏覽器不支持 max-width 指令。
img { max-width: 100%; }
雖 雖然上述技術(shù)是有效的，有時你可能需要有更多的圖像控制權(quán)，例如根據(jù)客戶端的顯示大小，顯示不同的圖像。
讓我們看看 HTML：
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
正如你可以看到，我們使用 data-* 屬性來存儲替換圖像的 URL?，F(xiàn)在，讓我們使用強大的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);
}
}
令人印象深刻，是不是？現(xiàn)在，讓我們來看看另一個在今天的網(wǎng)站中非常重要的媒體——視頻。由于大多數(shù)網(wǎng)站使用的視頻來自第三方網(wǎng)站，我決定把重點放在 Nick La的彈性視頻技術(shù)，這種技術(shù)可讓您嵌入的響應(yīng)式的視頻。
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%;
}
在 你的網(wǎng)站上應(yīng)用了這些代碼后，嵌入的視頻也是響應(yīng)式（Responsive）的了。
3 – 字體
本教程的最后一步絕對非常重要，但往往被網(wǎng)站開發(fā)人員忽視——字體。到現(xiàn)在為止，大多數(shù)開發(fā)人員（包括我自己）使用像素來定義字體的大小。雖然像素在普通網(wǎng)站使用是OK的，但是對于響應(yīng)式網(wǎng)站來說應(yīng)該有響應(yīng)式的字體。事實上，一個響應(yīng)式的字體大小應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣它才可以適應(yīng)客戶端的屏幕。
CSS3 規(guī)范引入了一個新的單位叫 rem，和 em 類相似，但相對于 HTML 元素來說， rem 更易于使用。
rem 是相對于 HTML 元素的，不要忘了重置 HTML 的字體大小：
html { font-size:100%; }
完成后，您可以定義響應(yīng)式的字體大小，如下所示：
@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;} }
請注意，舊瀏覽器不支持 rem 單元，所以不要忘了實現(xiàn)一個替代。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！
名稱欄目：3個步驟讓你的網(wǎng)站變成響應(yīng)式網(wǎng)站
網(wǎng)站路徑：http://www.rwnh.cn/news41/320191.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、小程序開發(fā)、網(wǎng)站制作、網(wǎng)站策劃、定制開發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 什么是服務(wù)器監(jiān)控軟件？為什么服務(wù)器監(jiān)控很重要？ 2024-03-11
- 成都網(wǎng)站建設(shè)關(guān)于CSS中rem布局的講解 2024-03-11
- 成都app開發(fā)公司O2O寡頭競爭硬碰硬！ 2024-03-10
- 美國高防服務(wù)器的優(yōu)勢分析 2024-03-10
- 營銷型網(wǎng)站建設(shè)能給企業(yè)提供什么價值 2024-03-10
- 移動端適配方法 2024-03-09
- 成都app開發(fā)告訴你傳統(tǒng)物業(yè)戰(zhàn)略轉(zhuǎn)型社區(qū)O2O方案！ 2024-03-09
- 流行的潮流建站風(fēng)格有哪些？ 2024-03-11
- 影響排名的站內(nèi)因素 2024-03-10
- 淺析網(wǎng)站建設(shè)與企業(yè)品牌之間的關(guān)系 2024-03-10
- 如何選擇三種長尾關(guān)鍵詞 2024-03-10
- 公司企業(yè)網(wǎng)站建設(shè)電話營銷挖掘客戶需求話術(shù)是什么？ 2024-03-09
- 教你一個簡單而快速的方法來制作一個簡單的小程序 2024-03-09
- 成都網(wǎng)站建設(shè)-找網(wǎng)絡(luò)公司做網(wǎng)站需要注意哪些問 2024-03-09
- 新成立的環(huán)保測評公司如何布局微信SEO搜索排名？ 2024-03-09
- 在網(wǎng)站建設(shè)過程中色彩應(yīng)用搭配技巧 2024-03-08
- 常見的服務(wù)器負載均衡技術(shù)，負載均衡器有哪些類型？ 2024-03-08
- 成都網(wǎng)站建設(shè)公司之網(wǎng)站建設(shè)步驟 2024-03-08
- 很多人問的問題：怎樣設(shè)計優(yōu)秀的網(wǎng)頁 2024-03-08