4、流動布局(fluidgrid)

“流動布局”的含義是，各個區塊的位置都是浮動的，不是固定不變的。

.main{

float:right;

width:70%;

}

.leftBar{

float:left;

width:25%;

}

float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow(溢出)，避免了水平滾動條的出現。 另外，絕對定位(position:absolute)的使用，也要非常小心。

5、選擇加載CSS

“自適應網頁設計”的核心就是CSS3引入的MediaQuery模塊，它的意思就是，自動探測屏幕寬度，然后加載相應的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文件，還可以在現有CSS文件中加載。

6、CSS的@media規則

同一個CSS文件中，也可以根據不同的屏幕分辨率，選擇應用不同的CSS規則。

@mediascreenand(max-device-width:400px){

.column{

float:none;

width:auto;

}

#sidebar{

display:none;

}

}

上面的代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動(float:none)、寬度自動調節(width:auto)，sidebar塊不顯示(display:none)。

7、圖片的自適應(fluidimage)

除了布局和文本，自適應網頁設計還必須實現圖片的自動縮放。

這只要一行CSS代碼：

img{max-width:100%;}

這行代碼對于大多數嵌入網頁的視頻也有效，所以可以寫成：

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

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

img{width:100%;}

此外，windows平臺縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有命令：

img{-ms-interpolation-mode:bicubic;}

或者，

EthanMarcotte的imgSizer.js。

addLoadEvent(function(){

varimgs=document.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collate(imgs);

});

最好還是做適配分辨率的圖片，有很多方法可以做到同樣效果，服務器端和客戶端都可以實現。

總結

以上是生活随笔為你收集整理的HTML页面代码移动端和pc兼容,pc端网站如何实现移动端适配？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。