自适应网站近来很流行，当然，对一个新手来说可能听起来有点复杂，其实它比你想象的简单多了。这里是一个快速教程，通过学习你会自适应网站，但是前提是你必须的懂一点css才行。
网站自适应，小编以前认为是很高级而且需要花费很多时间去搭建实现出来，要设计很多套CSS，并且要结合jQuery，来实现自适应不同的设备。所以小编就在网上找各种教程看，直到前几日小编发现了一篇极其有价值的一篇文章，里面介绍了实现自适应网站的快速方法，今日小编决定把小编在这篇文章中学到的知识来分享给大家。
由于小编也是第一次看着参考代码去实现完成网站自适应，所以有地方可能写的也不是很详细，有不对的地方欢迎大家积极与小编讨论。
下面先给大家看一看实现的网页图片，这里先为大家看一看已经完成的部分。
下面就说说如何把网页改为自适应吧，小编为什么说很简单？因为你不需要任何高深的网页设计技术，你只需要懂一点html、一点css，而修改耗时对于一张普通网页来说，确实只需几个小时。
首次来说一说第一步，这一步就非常简单了，直接把下面的代码直接复制到<head></head>之间就行了。
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
前面两个meta，no-siteapp和no-transform，是告诉搜索引擎不要把网页转码。第三个meta，声明网页可以缩小放大。
然后再把css代码也粘贴到<head></head>之间。
<style type="text/css">
@media(max-width:640px)
{
}
</style>
这段css代码，意思是在屏幕宽度小于640px的时候执行的样式，在里面写小于640px时网页的css样式。当然我们也可以把640px改成其它你想要的值就行。
那么就有朋友要问了，那么我们如何把那些不需要在手机网页上显示的内容隐藏掉呢？想要的部分又如何显示出来呢？举个例子说明一下，例如头部的div、导航栏的div、正文的div、侧栏的div、页脚的div，然后，我们就使用css隐藏不用显示的div，代码很简单，就是display:none，需要显示的内容代码就是display:block。
<style type="text/css">
/* 默认隐藏手机版头部、导航和页脚 */
#top_mobile{display:none}
#nav_mobile{display:none}
#foot_mobile {display:none}
@media(max-width:960px)
{
/* 网页全屏显示 */
body {width:100%;}
/* 正文全屏显示 */
#divMain{width:100%}
/* 正文图片宽度最多是屏幕宽度的90% */
#mian img{max-width:90%}
/* 隐藏头部、导航、侧栏、页脚 */
#top {display:none}
#nav {display:none}
#foot{display:none}
/* 显示手机版头部、导航和页脚 */
#top_mobile{display:block}
#nav_mobile{display:block}
#foot_mobile{display:block}
}
{
}
</style>
当然了，这只是一个最基本的自适应网站设计，着重是介绍思路，你可以在此思路的指引下，完成更加复杂的设计。
更新时间：2017-04-07
