自移动互联网开始普及以来,已发展15年,在企业网站建设领域,采用响应式布局技术的自适应已基本取代了独立手机站点并成为主流。据艺琼网络2014年的统计报告,在新建设的企业网站中,100%采用了自适应。纵观国内网站建设行业,除了早期已上线的手机独立站,新上线的网站超过98%均采用了自适应。为何自适应建站如使受到广大网站建设公司和用户的欢迎?这得益于HTML5和CSS3的出现,也是实现响应式布局技术的基石。
2001年5月23日CSS3标准草案正式发布、2014年10月28日HTML5标准正式发布后,各浏览陆续对HTML5和CSS3予以支持。而对于自适应的普及,CSS3中的@media起到了重要的作用,它能够根据不同终端设备的屏幕分辨率,提供不同的CSS样式,从而改变网页的排版,由于根据屏幕分辨率变化而变化,故称为响应式布局。基于此,同一套代码实现多个终端设备的访问成为了可能。以下列CSS代码为例:
.box {width: 20%;}
@media(max-width:1500px){
.box {width: 25%;}
}@media(max-width:1200px){
.box {width: 33.33%;}
}@media(max-width:750px){
.box {width: 50%;}
}@media(max-width:480px){
.box {width: 100%;}
}
样式.box正常情况下显示宽度为父元素的20%,而当屏幕宽度小于1500像素时,.box的宽度自动改变为父元素宽度的25%。依此类推,当屏幕宽度小于480像素时,.box的宽度自动改变为父元素宽度的100%。从而实现了从电脑、平板到手机的全覆盖,在不同设备下,能显示为不同的样式。于是,自适应就实现了。
细心的朋友在浏览网站时可能已经发现,过去访问电脑版用https://www.yiqnet.com,访问手机版用https://m.yiqnet.com,是2个不同的子域名,这是因为设计了2个完全独立的版面,一个电脑版和一个手机版。而现在,只需要开发一套代码,访问网站也只需https://www.yiqnet.com即可。这样理解可能会更通俗易懂一些,当用户用脑访问时,自动显示为电脑版,当用户用手机访问时,自动显示为手机版,当然,也包括其他不同尺寸设备的版本。
采用响应式布局技术的自适应网站,相较于传统的独立手机站,具有十明明显的优势:
由于自适应依赖于同一套代码,而独立手机站有独立的一套代码,不受约束,可以设计出与电脑版完全不同的排版设计,所以,在个性化方面的确不如独立站点。对于极少数追求个性化手机版的网站,独立手机站仍有一席之地。
自适应其实在几乎所有种类的网站中都得到广泛应用,只是在企业网站、外贸网站中的应用更为常见而已。如同4G、5G一样,自适应给互联网带来了重大的变革,为移动互联网的普及提供了重要的基础保障。