pc端網(wǎng)站如何實(shí)現(xiàn)移動(dòng)端適配？

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è)的視頻也有效，所以可以寫(xiě)成：

img,object{max-width:100%;}

老版本的IE不支持max-width，所以只好寫(xiě)成：

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)?

一、PC網(wǎng)站自動(dòng)適配手機(jī)網(wǎng)頁(yè)的7個(gè)步驟

一般來(lái)說(shuō)，移動(dòng)適配主要通過(guò)底層的web技術(shù)開(kāi)發(fā)手段來(lái)完成，下面將通過(guò)移動(dòng)適配技術(shù)的角度來(lái)告訴你通過(guò)7個(gè)步驟來(lái)完成一個(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ì)寬度的元素，這一條非常重要。 具體說(shuō)，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)。

二、適配最常見(jiàn)的操作方法

據(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)適配的功能，例如百度的開(kāi)放適配和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)是只需要在搜索引擎工具提交資料，無(wú)需對(duì)站點(diǎn)本事做改動(dòng)，而且網(wǎng)站內(nèi)容一一對(duì)應(yīng)，并不只局限于網(wǎng)站首頁(yè)。 缺點(diǎn)就是只能在百度或者360移動(dòng)搜索中生效，其他沒(méi)用提交適配文件的搜索中就無(wú)效了。

2、JS跳轉(zhuǎn)

JS跳轉(zhuǎn)對(duì)于某些行業(yè)來(lái)說(shuō)有著重要的作用，尤其是對(duì)于用戶轉(zhuǎn)換率網(wǎng)站首頁(yè)較高的網(wǎng)站，只需要在網(wǎng)站的頭部加一段JS代碼判定是否是移動(dòng)端訪問(wèn)，然后所有的流量就會(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信息來(lái)指明該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ì)于其他搜索引擎無(wú)效。

4、302規(guī)則

302規(guī)則指的是，當(dāng)判定移動(dòng)端訪問(wèn)網(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í)性的重定向，但過(guò)于頻繁的302是很有可能給網(wǎng)站帶來(lái)不利的影響的，具體的尺度需要站長(zhǎng)自己去把握。 以上4種適配方法是最為常見(jiàn)的操作方法，通常PC站做了以上處理后，一段時(shí)間以后移動(dòng)端搜索出來(lái)的結(jié)果，下面匹配的網(wǎng)址就變成了移動(dòng)站網(wǎng)址，不過(guò)標(biāo)題還是PC站標(biāo)題。 至于到底哪種方法更好，更傾向于第一種，畢竟百度移動(dòng)搜索占據(jù)著網(wǎng)站的大部分流量，而且用戶體驗(yàn)度也最好。

三、百度開(kāi)放適配服務(wù)的3種方案

百度站長(zhǎng)平臺(tái)對(duì)移動(dòng)適配方面的東西這么定義：為了提升用戶的移動(dòng)搜索結(jié)果瀏覽體驗(yàn)，百度移動(dòng)搜索對(duì)具有對(duì)應(yīng)手機(jī)站的PC站提供“開(kāi)放適配”服務(wù)。如果您同時(shí)擁有PC站和手機(jī)站，且二者能夠在內(nèi)容上對(duì)應(yīng)，您可向百度“提交”P(pán)C頁(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é)果。積極的參與“開(kāi)放適配”，將有助于您的手機(jī)站在百度移動(dòng)搜索獲得更好的展現(xiàn)，同時(shí)以更佳的瀏覽效果贏取用戶口碑。

百度開(kāi)放適配服務(wù)共提供三種方案——自主適配、標(biāo)注Meta聲明、提交對(duì)應(yīng)關(guān)系Sitemap，同時(shí)向站點(diǎn)提供開(kāi)放適配進(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的都懂得。

說(shuō)那么多看么? 手機(jī)自適應(yīng)[網(wǎng)頁(yè)]就行了! 實(shí)在不行,代碼給我,我給你改!

好慢呀,空空如也,半天不來(lái)大神解決,大佬在哪啦

我的網(wǎng)站寬度都寫(xiě)死了，都是用的px

說(shuō)白點(diǎn)還是要靠自己摸索

大神在哪里呀,大神在哪里呀,大神在哪里呀.

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è)的視頻也有效，所以可以寫(xiě)成：hljs css img , object { max-width : 100% ;}老版本的IE不支持max-width，所以只好寫(xiě)成：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)。