请稍候...

当前位置 首页>>新闻中心>>手机网站制作>>

自适应网站案例


2016-09-18 来源: http://www.inmaxnet.com/

       自适应网站,是杭州手机网站制作公司常常采用的技术,首先普及下自适应网站的基本概念,然后需要了解当前制作自适应网站有哪些方法,以及常见的的自适应网站案例,就可以开始着手制作自适应网站。

       企业信息化建设中比较多的就是企业建站,在过去的建站概念里面,常规的电脑PC端的企业服务类似网站,或者是商品展示类网站,以及电商类B2C购物网站。近年来,手机上网应用速度非常之快,催生了移动互联网的发展,网站建设从过去的网页设计,转向了企业移动建站,针对以往已经制作的网页,在新的互联网时代,面临更新换代,从而,一种经济实惠的自适应网站由此而生。

       什么是自适应网站

       自适应网页设计(Adaptive  Web Design)指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

       移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?
      手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。
      很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。
        于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)。比如6张图片

如果屏幕宽度大于1300像素,则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

如果屏幕宽度在400像素以下,则6张图片分成三行。

       通过这种方式处理网页布局显示,是一种比较有效的移动应用解决方案,在不改变以往的网站布局,内容的基础上,做移动适配。以下是PC端效果

20160918142941.png

当网站在非PC端展示时,呈现以下效果

自适应网站




推荐案例