PC网站如何改为自适应网站,其实非常简单!

下面就说说如何把网页改为自适应吧,我为什么说很简单?因为你不需要任何高深的网页设计技术,你只需要懂一点html、一点css,而修改耗时对于一张普通网页来说,确实只需几个小时。

我把整个改动过程分为两个步骤。

第一步,非常简单,把如下代码直接复制到里面。

 

前面两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码。第三个meta,声明网页可以缩小放大。

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

 

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

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

举例说明,比如网页结构如下图所示:

PC网站如何改为自适应网站,其实非常简单!

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

 

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

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

看了这个实例,是不是很简单?网页自适应就是这样做的!

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

如下图所示网页结构:

PC网站如何改为自适应网站,其实非常简单!

包含手机模块的网页结构

css就可以这样写

 

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

看完这个实例,是不是觉得自适应设计其实是非常容易的呢?当然了,这只是一个最基本的自适应设计,着重是介绍思路,你可以在此思路的指引下,完成更加复杂的设计。

RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
ANY资源 » PC网站如何改为自适应网站,其实非常简单!

发表评论

提供最优质的资源集合

立即查看 了解详情