平时我们所说的自适应网站，从专业角度讲，它应该称为响应式网站，即网站的同一个页面在不同的客户端打开的时候，会有不同的布局，比如某个网站里有个abcaa.html这个文件，在用手机与电脑打开的时候，显示的模式是不一样的，比如用电脑打开的时候，会自动排成宽度是1200px，而用手机打开的时候会以百分比的形式来展现，并且左右两边没有滑动块，显现的是为手机移动端量身定做的布局与设计，就是所谓的遇到不同客户端会有不同的响应。而自适应的概念更加的口语化，说明这个网页自动适应不同的客户端，是这个意思。有时我们把网站的banner两边无限延伸（实际上无限延伸是有度，因为目前国内电脑宽的像素也就是1920px，因而只要做个1920px的即可）也称为自适应。

为了让大家更加的理解以上的概念，再详细的举例列个细节。

比如一个网站的域名是hello.com，里面有五个页面，分别为aaa.html、baa.html、caa.html、daa.html、eaa.html，正常情况下，用电脑访问hello.com/aaa.html的时候，会很自然的显示PC网站，用手机访问的时候也能看到，只是左右会有滑动块，并且字体与图片狂小，这个很能理解的，因为它本来就是为电脑量身定做的嘛。

但如果aaa.html这个页面是响应式的页面，就大不一样了，用电脑打开后还跟以前一样，但用手机打开hello.com/aaa.html后，就会显示与手机相适应的页面，比如字体与图片会大，大得跟手机大小相得益彰，再比如新闻会变成一行一行，不会有几列显示，缩略图之类，一行多两个，而电脑上缩略图排版，一行至少也要四个或五个，再比如在电脑上会以一行的形式展现功能菜单，而手机上至少有两行，有的干脆自动隐藏起来，当点击某个按钮时才会显示这些导航。

关于这方面的技术，其实非常的简单，主要是通过自媒体media来实现，电脑media与手机media对于id或class的定义是完全不一样的，换句话说，网页中的代码，大家是看不出自适应与否的，只有看到css，看到不同的media对id或class的定义，才能更深的理解网页中的代码，才会知道会有不同的排版方式。

技术方面具体的情况是，对于id与class的定义，如果PC端与移动端是一样的，那直接放在css中的media之外，说白了，就是公用，只有当电脑或是手机与之不一样时，才会在media中进行重新定义，一般来说，media的权限要高一些，但事实情况并非如此（具体原因不明），介于这个原因，因而我们在css中，要尽量将media定义放到后面，因为css的规则是后面的定义会自动覆盖前面的，当然在aaa.html里引入这些css文件时，也要特别留意一下将media放到后，实际的开发过程中尤为重要，如果不注意这些，有时会莫名其妙的出css问题，后检查出来，发现就是因为media放到前面去了，后面的新定义的就覆盖前面了，之所以出现这样的情况，是我们对于media的权限的盲目自信。

希丁哥是有着十五年发展历史的网站制作公司，无论是技术还是售后，都是成熟的，目前公司正在搞活动，推出全新的物所值的网站套餐，具体如下：

入门型：1500元

经济型：2800元

常规型：3900元

商务型：5500元

豪华型：6500-20000元