《实用技巧》——让你的网站变成响应式的3个简单步骤
如今，一個(gè)網(wǎng)站只在桌面屏幕上好看是遠(yuǎn)遠(yuǎn)不夠的，同時(shí)也要在平板電腦和智能手機(jī)中能夠良好呈現(xiàn)。響應(yīng)式的網(wǎng)站是指它能夠適應(yīng)客戶端的屏幕尺寸，自動(dòng)響應(yīng)客戶端尺寸變化。在這篇文章中，我將向您展示如何通過(guò)3個(gè)簡(jiǎn)單的步驟輕松地使網(wǎng)站變成響應(yīng)式（Responsive）。
您可能感興趣的相關(guān)文章- 2012年排名前20位的 CSS 網(wǎng)站作品
- 25佳優(yōu)秀的流體和響應(yīng)式布局網(wǎng)頁(yè)設(shè)計(jì)
- 2012年最佳 Web 前端開(kāi)發(fā)工具和框架
- 25個(gè)國(guó)外優(yōu)秀的電子商務(wù)網(wǎng)站設(shè)計(jì)案例
- 85個(gè)很優(yōu)秀的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)作品范例
?
1 – 布局
當(dāng)創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站，或讓現(xiàn)有的網(wǎng)站變成響應(yīng)式的，首先要關(guān)注的元素的布局。我在建立響應(yīng)式的網(wǎng)站，總是先創(chuàng)建一個(gè)非響應(yīng)的布局，頁(yè)面寬度固定大小。如果非響應(yīng)版本完成得非常不錯(cuò)，我再添加媒體查詢（Media Queries）和響應(yīng)式代碼。這種操作方式更容易實(shí)現(xiàn)響應(yīng)式特性，在同一時(shí)間專注于一個(gè)任務(wù)。
當(dāng)你已經(jīng)完成了無(wú)響應(yīng)的網(wǎng)站，做的第一件事是在你的 HTML 頁(yè)面，粘貼下面的代碼到<head>和</head>標(biāo)簽之間。這將設(shè)置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機(jī)的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶縮放頁(yè)面。
?
<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)在是時(shí)候添加一些媒體查詢了。根據(jù) W3C 網(wǎng)站，媒體查詢由媒體類型和零個(gè)或多個(gè)媒體查詢的條件表達(dá)式組成。通過(guò)使用媒體查詢，外觀呈現(xiàn)可以針對(duì)特定范圍內(nèi)的輸出設(shè)備，而不需要改變內(nèi)容本身。換句話說(shuō)，媒體查詢讓您的網(wǎng)站在各種各種顯示器上看起來(lái)都很好，從小的智能手機(jī)到大的電腦屏幕等等。
媒體查詢?nèi)Q于你的網(wǎng)站布局，所以對(duì)我來(lái)說(shuō)為您提供一個(gè)現(xiàn)成可以使用的代碼片段有點(diǎn)困難。但是，下面的代碼對(duì)于大多數(shù)網(wǎng)站都是一個(gè)很好的起點(diǎn)。在這個(gè)例子中，#primary 是主要內(nèi)容區(qū)域，#secondary 是側(cè)欄。
從代碼中你可以看到，我定義了兩種規(guī)格：首先有一個(gè)最大寬度為1060px，為平板電腦優(yōu)化的橫向顯示。#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。 第二個(gè)規(guī)格是用于平板電腦和更小的屏幕尺寸。
由于智能手機(jī)的屏幕尺寸小，我決定給 #primary 設(shè)置100%的寬度，#secondary 也設(shè)置100%的寬度，他將在 #primary 下面。 正如我已經(jīng)說(shuō)過(guò)的，你可能必須要對(duì)這段代碼位進(jìn)行修改才能適應(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)的。要做到這一點(diǎn)，我用這?Matt Kersley 創(chuàng)建的一款非常的響應(yīng)式測(cè)試工具。
?
2 – 媒體
一個(gè)響應(yīng)式的布局是實(shí)現(xiàn)響應(yīng)網(wǎng)站的第一步。現(xiàn)在，讓我們把注意力集中在另外一個(gè)現(xiàn)代化網(wǎng)站非常重要的方面：媒體，如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠(yuǎn)不會(huì)大于他們的父容器，代碼非常簡(jiǎn)單，適用于大多數(shù)網(wǎng)站。請(qǐng)注意，IE6 等舊的瀏覽器不支持 max-width 指令。
?
img { max-width: 100%; }?
雖然上述技術(shù)是有效的，有時(shí)你可能需要有更多的圖像控制權(quán)，例如根據(jù)客戶端的顯示大小，顯示不同的圖像。
這是由?Nicolas Gallagher?發(fā)明的好方法。讓我們看看 HTML：
?
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
正如你可以看到，我們使用 data-* 屬性來(lái)存儲(chǔ)替換圖像的 URL。現(xiàn)在，讓我們使用強(qiáng)大的 CSS3 來(lái)為匹配?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)在，讓我們來(lái)看看另一個(gè)在今天的網(wǎng)站中非常重要的媒體——視頻。由于大多數(shù)網(wǎng)站使用的視頻來(lái)自第三方網(wǎng)站，我決定把重點(diǎn)放在 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 – 字體
本教程的最后一步絕對(duì)非常重要，但往往被網(wǎng)站開(kāi)發(fā)人員忽視——字體。到現(xiàn)在為止，大多數(shù)開(kāi)發(fā)人員（包括我自己）使用像素來(lái)定義字體的大小。雖然像素在普通網(wǎng)站使用是OK的，但是對(duì)于響應(yīng)式網(wǎng)站來(lái)說(shuō)應(yīng)該有響應(yīng)式的字體。事實(shí)上，一個(gè)響應(yīng)式的字體大小應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣它才可以適應(yīng)客戶端的屏幕。
CSS3 規(guī)范引入了一個(gè)新的單位叫 rem，和 em 類相似，但相對(duì)于 HTML 元素來(lái)說(shuō)， rem 更易于使用。
rem 是相對(duì)于 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;} }請(qǐng)注意，舊瀏覽器不支持 rem 單元，所以不要忘了實(shí)現(xiàn)一個(gè)替代。
這就是今天的所有內(nèi)容了，希望你會(huì)喜歡這個(gè)教程！記得推薦和分享啊！
?
您可能感興趣的相關(guān)文章
- 帶給你靈感的20個(gè)漂亮的單頁(yè)網(wǎng)站作品
- 20個(gè)非常經(jīng)典的國(guó)外單頁(yè)網(wǎng)站作品示例
- 分享35個(gè)非常漂亮的單頁(yè)網(wǎng)站設(shè)計(jì)案例
- 25個(gè)優(yōu)秀的國(guó)外單頁(yè)網(wǎng)站設(shè)計(jì)作品欣賞
- 分享最新30個(gè)漂亮的單頁(yè)網(wǎng)站設(shè)計(jì)案例
?
原文鏈接：Making a website responsive in 3 easy steps
編譯來(lái)源：夢(mèng)想天空 ◆ 關(guān)注前端開(kāi)發(fā)技術(shù) ◆ 分享網(wǎng)頁(yè)設(shè)計(jì)資源
轉(zhuǎn)載于:https://www.cnblogs.com/lhb25/archive/2013/03/06/making-a-website-responsive-in-3-easy-steps.html
總結(jié)
以上是生活随笔為你收集整理的《实用技巧》——让你的网站变成响应式的3个简单步骤的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 白娘子传奇手游源码
- 下一篇： 在Web服务器磁盘上缓存数据和HTML页