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