所謂“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(Responsive Web Design)”也就是自適應(yīng)，就是可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。就是輸入本站域名，手機(jī)、平板、PC端顯示的效果不同的，但是URL確是相同的。響應(yīng)式網(wǎng)站，利于SEO(統(tǒng)一了URL)，利于用戶體驗(yàn)，也利于用戶分享。

這是怎么做的呢?

核心內(nèi)容在于：導(dǎo)航欄和CSS的兩個(gè)變化。

希望學(xué)習(xí)的朋友請(qǐng)自行查看本站源代碼，請(qǐng)注意：

1，網(wǎng)站導(dǎo)航兩個(gè)，一個(gè)PC端，一個(gè)移動(dòng)端，注意加粗部分。

PC段導(dǎo)航：

<div id="nav">

<#CACHE_INCLUDE_NAVBAR#>

</div>

移動(dòng)端導(dǎo)航：

<nav id="navs-wrap">

<div id="logos"><h1><a href="<#ZC_BLOG_HOST#>" title="<#ZC_BLOG_TITLE#>"><#ZC_BLOG_TITLE#></a></h1></div>

<ul id="navs" class="menu"><#CACHE_INCLUDE_FUNCTION28#></ul>

</nav>

請(qǐng)注意HTML源文件里的一個(gè)判斷語(yǔ)句：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在head里加入這條元標(biāo)簽，那移動(dòng)瀏覽器中頁(yè)面將以原始大小顯示，并不能縮放。不讓瀏覽器縮放目的是保證網(wǎng)頁(yè)能自適應(yīng)屏幕的完整性，避免網(wǎng)頁(yè)混亂。

width - viewport的寬度 height - viewport的高度

initial-scale - 初始的縮放比例

minimum-scale - 允許用戶縮放到的最小比例

maximum-scale - 允許用戶縮放到的最大比例

user-scalable - 用戶是否可以手動(dòng)縮放

那么問(wèn)題來(lái)了，如何讓瀏覽器判斷設(shè)備尺寸呢?

有兩種方式，一種是直接在link中判斷設(shè)備的尺寸，然后引用不同的css文件，棄用。原因是博客CSS文件不大代碼也不多，不需要多個(gè)CSS文件，也能減少并發(fā)。

第二種就是我現(xiàn)在用的這種，請(qǐng)直接查看本站CSS文件，

核心代碼來(lái)了，開始研究響應(yīng)式web設(shè)計(jì)朋友，CSS3 Media Queries是入門。

在CSS中加入語(yǔ)句：

@media screen and (max-width: 600px) { /*當(dāng)屏幕尺寸小于600px時(shí)，應(yīng)用下面的CSS樣式*/

大家可以看到我博客里有多個(gè)判斷，1024px，768px，650px，500px，400px，350px。

這意味著寬度在1024px以下的屏幕，我博客會(huì)呈現(xiàn)六種不同的效果。但為了保證網(wǎng)頁(yè)的連續(xù)性與完整性，同時(shí)也是圖省事，下面六個(gè)CSS幾乎相同。

唯一不同的是加入了display:none，不顯示某些內(nèi)容。所以通過(guò)CSS觀察發(fā)現(xiàn)，屏幕越小，顯示的內(nèi)容就越來(lái)越少。

這也是文章開頭為什么pad和移動(dòng)端顯示的界面不同的原因之一。

要注意的是由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素。這一條非常重要，否則會(huì)出現(xiàn)橫向滾動(dòng)條。

總結(jié)：只要制作兩個(gè)導(dǎo)航，能看懂CSS文件就可以搞定，照貓畫虎，人人都能做出響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)，看似很難，實(shí)際上很簡(jiǎn)單。

河南億恩科技股份有限公司(mszdt.com)始創(chuàng)于2000年，專注服務(wù)器托管租用，是國(guó)家工信部認(rèn)定的綜合電信服務(wù)運(yùn)營(yíng)商。億恩為近五十萬(wàn)的用戶提供服務(wù)器托管、服務(wù)器租用、機(jī)柜租用、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站托管等網(wǎng)絡(luò)基礎(chǔ)服務(wù)，另有網(wǎng)總管、名片俠網(wǎng)絡(luò)推廣服務(wù)，使得客戶不斷的獲得更大的收益。
服務(wù)器/云主機(jī) 24小時(shí)售后服務(wù)電話：0371-60135900
虛擬主機(jī)/智能建站 24小時(shí)售后服務(wù)電話：0371-55621053
網(wǎng)絡(luò)版權(quán)侵權(quán)舉報(bào)電話：0371-60135995
服務(wù)熱線：0371-60135900