快速吧pc端网页自适应怎么实现？

第二步，在里加上如下css代码。

@media(max-width:960px)

{

}

这段css代码，意思是在屏幕宽度小于960px的时候执行的样式，当然你可以把960px改为其他更小的宽度，例如760px。

接下来，我们要做的就是把那些不需要在手机网页上显示的内容隐藏掉。如何隐藏？这就需要看懂网页的html代码了，需要分析每一个模块使用的div，例如头部的div、导航栏的div、正文的div、侧栏的div、页脚的div，然后，我们就使用css隐藏不用显示的div，代码很简单，就是display:none。

举例说明，比如网页结构如下图所示：

网页结构图

手机网页只需显示正文，我们把其他部分全部隐藏，代码如下：

@media(max-width:960px)

{

/*网页全屏显示*/

body {width:100%;}

/*正文全屏显示*/

#divMain{width:100%}

/*为了避免正文图片超出屏幕宽度*/

/*正文图片宽度最多是屏幕宽度的90%*/

#divMain img{max-width:90%}

/*隐藏头部、导航、侧栏、页脚*/

#divHead{display:none}

#divNav{display:none}

#divSide{display:none}

#divBottom{display:none}

}

这样，当在手机浏览网页时，就只显示正文了。

网页自适应就是这样做的！

看了这个实例，是不是很简单？网页自适应就是这样做的！

不过要把手机网页自适应得有头有尾，你还需要补充编写一些代码，例如编写针对手机网页的头部、导航和页脚的div，编写后默认为隐藏，在手机里再显示。

如下图所示网页结构：

包含手机模块的网页结构

css就可以这样写

/*默认隐藏手机版头部、导航和页脚*/

#divHead_mobile{display:none}

#divNav_mobile{display:none}

#divBottom_mobile{display:none}

@media(max-width:960px)

{

/*网页全屏显示*/

body {width:100%;}

/*正文全屏显示*/

#divMain{width:100%}

/*为了避免正文图片超出屏幕宽度*/

/*正文图片宽度最多是屏幕宽度的90%*/

#divMain img{max-width:90%}

/*隐藏头部、导航、侧栏、页脚*/

#divHead{display:none}

#divNav{display:none}

#divSide{display:none}

#divBottom{display:none}

/*显示手机版头部、导航和页脚*/

#divHead_mobile{display:block}

#divNav_mobile{display:block}

#divBottom_mobile{display:block}

}

至此，你就可以自适应设计出一个漂亮的手机版页面了。