門戶網站如何做到屏幕寬度兼容

Ⅰ 怎麼把一個pc頁面自適應手機屏幕，自適應手機屏幕網站怎麼做嗎

無論是電腦還是手機，要做到自適應屏幕，其實都是一樣的。

首先，在網頁代碼的頭部，加入一行viewport標簽

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的判旁100%。即讓viewport的寬度等於物理設備正則上的真實解析度，不允許用戶縮放。

其次：網頁寬度css一定要使用百分比width:xx%;，不能用絕對像素。當然可以用width:auto;

第三，流動布局

.left{

float:left;

width:***%;

}

第四，選擇載入css

這是自適應的關鍵部分

.abc{height:300px;border:1pxsolid000;margin:0auto}

@mediascreenand(min-width:1201px){

.abc{width:1200px}

}

/*設置了瀏覽器寬度不小於1201px時abc顯示1200px寬度*/

@mediascreenand(max-width:1200px){

.abc{width:900px}

}

/*設置了瀏覽器寬度不大於1200px時abc顯示900px寬度*/

@mediascreenand(max-width:901px){

.abc{width:200px;}

}

/*設置了瀏覽器寬度不大於901px時abc顯示200px寬度*/

@mediascreenand(max-width:500px){

.abc{width:100px;}

}

/*設置了瀏覽器寬度不大於500px時abc顯示100px寬度*/

需要注意是CSS代碼順序，由大到小排版CSS（判斷瀏覽器寬度越大越放前），這樣是因為邏輯關系，@media判斷CSS排錯將導致判斷失效。

第四，圖片自適應

img{max-width:100%;}

老版本的IE不支持max-width，所以只好寫成：img{width:100%;}

篳五、採用相對字體大小

字體也不舉沖棚能使用絕對大小（px），而只能使用相對大小（em）。

這里最重要的，是第三條和第四條，也就是採用流動布局和css選擇載入。祝你好運！

Ⅱ 做網站時如何讓頁面自適應大小

做網站讓頁面自適應大小方法代碼如下：

一、電腦站設置網站自適應方法

全屏寬度主要在於CSS代碼中，將width為100%，而不是一個固定的像素值，代碼如下。

手機網設置網自適應方法：

在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

解釋：

1. width=device-width ：寬度等於設備屏幕的寬度。

2. initial-scale=1.0：表示：初始的縮放比例。

3. minimum-scale=0.5：表示：最小的縮放比例。

4. maximum-scale=2.0：表示：最大的縮放比例。

5. user-scalable=yes：表示：用戶是否可以調整縮放比例。