4、流動(dòng)布局(fluidgrid)
“流動(dòng)布局”的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow(溢出)，避免了水平滾動(dòng)條的出現(xiàn)。 另外，絕對(duì)定位(position:absolute)的使用，也要非常小心。
5、選擇加載CSS
“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心就是CSS3引入的MediaQuery模塊，它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。
media=”screenand(max-device-width:400px)”
href=”tinyScreen.css”/>上面的代碼意思是，如果屏幕寬度小于400像素(max-device-width:400px)，就加載tinyScreen.css文件。
media=”screenand(min-width:400px)and(max-device-width:600px)”
href=”smallScreen.css”/>如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。 除了用html標(biāo)簽加載CSS文件，還可以在現(xiàn)有CSS文件中加載。
6、CSS的@media規(guī)則
同一個(gè)CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則。
@mediascreenand(max-device-width:400px){
.column{
float:none;
width:auto;
}
#sidebar{
display:none;
}
}上面的代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動(dòng)(float:none)、寬度自動(dòng)調(diào)節(jié)(width:auto)，sidebar塊不顯示(display:none)。
7、圖片的自適應(yīng)(fluidimage)
除了布局和文本，自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。
這只要一行CSS代碼：
img{max-width:100%;}這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效，所以可以寫成：
img,object{max-width:100%;}老版本的IE不支持max-width，所以只好寫成：
img{width:100%;}此外，windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。這時(shí)，可以嘗試使用IE的專有命令：
img{-ms-interpolation-mode:bicubic;}或者，
EthanMarcotte的imgSizer.js。
addLoadEvent(function(){
varimgs=document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
});最好還是做適配分辨率的圖片，有很多方法可以做到同樣效果，服務(wù)器端和客戶端都可以實(shí)現(xiàn)。
現(xiàn)如今隨著智能手機(jī)的不斷發(fā)展，移動(dòng)端搜索的比例也在不斷增加，而傳統(tǒng)的PC站點(diǎn)在手機(jī)端的用戶體驗(yàn)度很差，這容易導(dǎo)致大量用戶的流失，所以做一個(gè)對(duì)應(yīng)的手機(jī)站是非常有必要的。
如今，手機(jī)站已經(jīng)逐漸成為一種潮流，基本上有點(diǎn)規(guī)模的PC站點(diǎn)都會(huì)制作相應(yīng)的手機(jī)站，可是在很多方面依然存在一定的難題，例如PC站和手機(jī)站的內(nèi)容如何適配才能在移動(dòng)搜索占據(jù)較好的排名呢?哪種方式的流量轉(zhuǎn)換更利于用戶體驗(yàn)?zāi)?
一般來說，移動(dòng)適配主要通過底層的web技術(shù)開發(fā)手段來完成，下面將通過移動(dòng)適配技術(shù)的角度來告訴你通過7個(gè)步驟來完成一個(gè)PC網(wǎng)站向移動(dòng)設(shè)備的跳躍!
1、允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整
“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”到底是怎么做到的?其實(shí)并不難。 首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽，viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度(width=device-width)，原始縮放比例(initial-scale=1)為1.0，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。 所有主流瀏覽器都支持這個(gè)設(shè)置，包括IE9，對(duì)于那些老式瀏覽器(主要是IE6、7、8)，需要使用css3-mediaqueries.js。
2、不使用絕對(duì)寬度
由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對(duì)寬度的布局，也不能使用具有絕對(duì)寬度的元素，這一條非常重要。 具體說，CSS代碼不能指定像素寬度：width:xxxpx; 只能指定百分比寬度：width:xx%;或者width:auto;
3、相對(duì)大小的字體
字體也不能使用絕對(duì)大小(px)，而只能使用相對(duì)大小(em)。
body{
font:normal100%Helvetica,Arial,sans-serif;
}上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素。
h1{
font-size:1.5em;
}然后，h1的大小是默認(rèn)大小的1.5倍，即24像素(24/16=1.5)。
small{
font-size:0.875em;
}small元素的大小是默認(rèn)大小的0.875倍，即14像素(14/16=0.875)。
據(jù)觀察，PC站和手機(jī)站匹配最常用的幾種方法是移動(dòng)適配、JS跳轉(zhuǎn)、Meta聲明、302規(guī)則等等，由于每種方法的操作方式不同，產(chǎn)生的效果也不同，具體的優(yōu)缺點(diǎn)也需要區(qū)別對(duì)待，在此就給大家比較一下這4種適配方法的優(yōu)缺點(diǎn)以及需要注意的地方：
1、移動(dòng)適配
現(xiàn)在很多搜索引擎都提供移動(dòng)適配的功能，例如百度的開放適配和360的移動(dòng)適配，利用百度站長(zhǎng)工具提交PC頁(yè)-手機(jī)頁(yè)對(duì)應(yīng)關(guān)系Sitemap，或者利用360站長(zhǎng)工具提交PC頁(yè)-手機(jī)頁(yè)對(duì)應(yīng)關(guān)系txt就能實(shí)現(xiàn)PC站內(nèi)容和手機(jī)站一一適配。 這樣做的優(yōu)點(diǎn)是只需要在搜索引擎工具提交資料，無需對(duì)站點(diǎn)本事做改動(dòng)，而且網(wǎng)站內(nèi)容一一對(duì)應(yīng)，并不只局限于網(wǎng)站首頁(yè)。 缺點(diǎn)就是只能在百度或者360移動(dòng)搜索中生效，其他沒用提交適配文件的搜索中就無效了。
2、JS跳轉(zhuǎn)
JS跳轉(zhuǎn)對(duì)于某些行業(yè)來說有著重要的作用，尤其是對(duì)于用戶轉(zhuǎn)換率網(wǎng)站首頁(yè)較高的網(wǎng)站，只需要在網(wǎng)站的頭部加一段JS代碼判定是否是移動(dòng)端訪問，然后所有的流量就會(huì)全部流向手機(jī)站的主頁(yè)。 JS跳轉(zhuǎn)的優(yōu)點(diǎn)是適用于所以的移動(dòng)搜索，并不局限于百度和360，可以提高用戶的轉(zhuǎn)換率。 缺點(diǎn)是難以實(shí)現(xiàn)每個(gè)頁(yè)面的一一對(duì)應(yīng)，而且容易被某些搜索引擎判定作弊，從而受到懲罰。
3、Meta聲明
Meta聲明的格式一般為，站長(zhǎng)可以將這段代碼加在PC站的頭部，由Meta信息來指明該P(yáng)C頁(yè)對(duì)應(yīng)的手機(jī)頁(yè)的URL，以及該URL對(duì)應(yīng)頁(yè)面的格式。 Meta聲明的優(yōu)點(diǎn)是代碼簡(jiǎn)單易懂，操作方便。 缺點(diǎn)是只能在百度移動(dòng)搜索中生效，對(duì)于其他搜索引擎無效。
4、302規(guī)則
302規(guī)則指的是，當(dāng)判定移動(dòng)端訪問網(wǎng)站時(shí)，302臨時(shí)跳轉(zhuǎn)到一個(gè)網(wǎng)址(手機(jī)站)，例如可以在htaccess文件里加上一段判定手機(jī)的代碼，做個(gè)302重定向。 這樣做的好處是，不需要再額外在網(wǎng)站的前端代碼中加任何東西，也不需要向搜索引擎提交規(guī)則，可是據(jù)測(cè)試，有可能會(huì)導(dǎo)致PC站被降權(quán)。 雖然302是暫時(shí)性的重定向，但過于頻繁的302是很有可能給網(wǎng)站帶來不利的影響的，具體的尺度需要站長(zhǎng)自己去把握。 以上4種適配方法是最為常見的操作方法，通常PC站做了以上處理后，一段時(shí)間以后移動(dòng)端搜索出來的結(jié)果，下面匹配的網(wǎng)址就變成了移動(dòng)站網(wǎng)址，不過標(biāo)題還是PC站標(biāo)題。 至于到底哪種方法更好，更傾向于第一種，畢竟百度移動(dòng)搜索占據(jù)著網(wǎng)站的大部分流量，而且用戶體驗(yàn)度也最好。
百度站長(zhǎng)平臺(tái)對(duì)移動(dòng)適配方面的東西這么定義：為了提升用戶的移動(dòng)搜索結(jié)果瀏覽體驗(yàn)，百度移動(dòng)搜索對(duì)具有對(duì)應(yīng)手機(jī)站的PC站提供“開放適配”服務(wù)。如果您同時(shí)擁有PC站和手機(jī)站，且二者能夠在內(nèi)容上對(duì)應(yīng)，您可向百度“提交”PC頁(yè)—手機(jī)頁(yè)的對(duì)應(yīng)關(guān)系，若對(duì)應(yīng)關(guān)系準(zhǔn)確，將有助于百度在移動(dòng)搜索中將原PC頁(yè)結(jié)果替換為對(duì)應(yīng)的手機(jī)頁(yè)結(jié)果。積極的參與“開放適配”，將有助于您的手機(jī)站在百度移動(dòng)搜索獲得更好的展現(xiàn)，同時(shí)以更佳的瀏覽效果贏取用戶口碑。
百度開放適配服務(wù)共提供三種方案——自主適配、標(biāo)注Meta聲明、提交對(duì)應(yīng)關(guān)系Sitemap，同時(shí)向站點(diǎn)提供開放適配進(jìn)度查詢。
可能大家對(duì)標(biāo)注meta聲明和提交對(duì)應(yīng)關(guān)系的sitemap這一項(xiàng)比較熟悉，另外對(duì)自主適配這個(gè)的理解僅限于使用百度的siteapp這個(gè)東西上面，因?yàn)楫?dāng)時(shí)我們的網(wǎng)站是在原有的PC站點(diǎn)上，做了一個(gè)對(duì)應(yīng)的手機(jī)站，這個(gè)手機(jī)站是單獨(dú)存在的。
而在移動(dòng)設(shè)備上搜素到的我們的網(wǎng)站都是PC端的形式，我們不想用百度的自動(dòng)轉(zhuǎn)碼，只是想標(biāo)注meta進(jìn)行判斷，判斷成功后進(jìn)行跳轉(zhuǎn)，而我當(dāng)時(shí)的需求就是要這個(gè)跳轉(zhuǎn)代碼，可能大家知道的跳轉(zhuǎn)代碼有很多，但是我當(dāng)時(shí)想要的是符合百度或者搜索引擎對(duì)移動(dòng)站點(diǎn)適配這個(gè)前提有一定的接受能力的跳轉(zhuǎn)方式，而不是簡(jiǎn)單的做個(gè)跳轉(zhuǎn)，做SEO的都懂得。
4、流動(dòng)布局(fluidgrid)“流動(dòng)布局”的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。hljs css .main { float :right; width : 70% ; } .leftBar { float :left; width : 25% ; }float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow(溢出)，避免了水平滾動(dòng)條的出現(xiàn)。 另外，絕對(duì)定位(position:absolute)的使用，也要非常小心。5、選擇加載CSS“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心就是CSS3引入的MediaQuery模塊，它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。hljs makefilemedia=”screenand(max-device-width:400px)” href=”tinyScreen.css”/>上面的代碼意思是，如果屏幕寬度小于400像素(max-device-width:400px)，就加載tinyScreen.css文件。hljs coffeescriptmedia=”screenand(min-width: 400 px) and (max-device-width: 600 px)” href=”smallScreen.css”/>如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。 除了用html標(biāo)簽加載CSS文件，還可以在現(xiàn)有CSS文件中加載。6、CSS的@media規(guī)則同一個(gè)CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則。hljs cpp@mediascreenand(max-device-width: 400 px){ .column{ float :none; width: auto ; } #sidebar{ display:none; } }上面的代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動(dòng)(float:none)、寬度自動(dòng)調(diào)節(jié)(width:auto)，sidebar塊不顯示(display:none)。7、圖片的自適應(yīng)(fluidimage)除了布局和文本，自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。這只要一行CSS代碼：hljs css img { max-width : 100% ;}這行代碼對(duì)于大多數(shù)嵌入網(wǎng)頁(yè)的視頻也有效，所以可以寫成：hljs css img , object { max-width : 100% ;}老版本的IE不支持max-width，所以只好寫成：hljs css img { width : 100% ;}此外，windows平臺(tái)縮放圖片時(shí)，可能出現(xiàn)圖像失真現(xiàn)象。這時(shí)，可以嘗試使用IE的專有命令：hljs css img { -ms-interpolation-mode :bicubic;}或者，EthanMarcotte的imgSizer.js。hljs javascriptaddLoadEvent( function () { varimgs= document .getElementById(“content”).getElementsByTagName(“img”); imgSizer.collate(imgs); });最好還是做適配分辨率的圖片，有很多方法可以做到同樣效果，服務(wù)器端和客戶端都可以實(shí)現(xiàn)。
