网站如何做到自适应（网页设计自适应布局）

网站如何做到自适应（网页设计自适应布局）

网站自适应，很多人都认为是很高级需要很多时间去实现的东西，不愿意去把一个现成的网站改成自适应，宁愿单独另外做一个移动站。我之前觉得实现网站自适应，要设计很多套CSS，并且要结合jQuery，来实现自适应不同的设备。我还以为要重新设计文章的图片，或者要用到JavaScript来控制图片尺寸，因为图片过大就会超出手机屏幕，而这个工作量是非常可怕的。种种顾虑使我一直不敢着手开刀，造成至今网站还只是一个PC版，而也没有多做一个移动版。

我为什么是把网站改为自适应，而不是改为一个单独的移动站？因为我想一劳百逸，不想同时维护PC站和移动站，这将为日后更新文章节省大量的时间。

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

第一步

，非常简单，把如下代码直接复制到里面。

第二步，在里加上如下css代码或者在相关调用css里

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

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

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

网页结构图

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

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

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

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

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

如下图所示网页结构：

包含手机模块的网页结构

css就可以这样写

这样，自适应网站就做成了