自适应网站(又称响应式网站)
平时我们所说的自适应网站,从专业角度讲,它应该称为响应式网站,即网站的同一个页面在不同的客户端打开的时候,会有不同的布局,比如某个网站里有个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元

值此希丁哥十五周年成立之际,公司掀起低价旋风,南京网站建设套餐全场打折!!!
网站套餐 / 客户案例 / 公司优势 / 域名主机 / 企业邮箱 / 网站推广 / 关于我们 / 返回首页
版权所有:南京希丁哥网络信息服务有限公司