Question

怎么把一个pc页面自适应手机屏幕，自适应手机屏幕网站怎么做吗

Answer 1

无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。

首先，在网页代码的头部，加入一行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选择加载。祝你好运！