门户网站如何做到屏幕宽度兼容

Ⅰ 怎么把一个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：表示：用户是否可以调整缩放比例。