平时我们所说的自适应网站,从专业角度讲,它应该称为响应式网站,即网站的同一个页面在不同的客户端打开的时候,会有不同的布局,比如某个网站里有个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的定义,才能更深的理解网页中的代码,才会知道会有不同的排版方式。