沈阳网站优化SEO_沈阳网站建设_沈阳王政基网络营销技术分享博客

沈阳SEO > 网页设计 > / 正文

自适应网站设计

2017-11-12 网页设计

什么是自适应网站建设?自适应是指处置跟 分析进程中,依据处置数据的数据特点主动调剂处置方式、处置次序、处置参数、边界前提或束缚前提,使其与所处置数据的统计散布特点、构造特点相适应,以获得最佳的处置后果。

起初,网页设计者都会设计固定宽度的页面,最开端的电脑显示器辨别率品种未几,由于当时电脑原来就少,即便有变更也是 800 850 870 880。比方传诚信的网页就是固定宽度为998来定制的。后来跟着显示器越来越多,以及笔记本的遍及,这种方法的页面呈现了问题。于是呈现了一种新的布局方法宽度自适应布局。咱们平时念叨的自适应布局,大多指的就是宽度自适应布局。

在这种布局下,呈现了两派:百分比宽度布局,流式布局

题主说的是第一派,宽度应用百分比,文字应用 em,当初也许多开端应用rem了,也就是所谓的高清计划。第二派的布局以 iGoogle 为代表(已经结束)。一开端不响应式布局这个词语,然而缓缓呈现了一个词——渐进加强,新词的呈现老是随同的旧词一起呈现。就比如 3G 呈现之前,没人管本人的手机叫 2G,所以,3G 跟 2G 两个词是一起呈现的(技巧受骗然2G技巧先呈现)。同理,渐进加强呈现后,另一个词「优雅降级」也随之呈现了。词的意思能够本人看 wiki、Google,我只在这儿举一个例子,gmail 跟 qqmail。

他俩的宽度都是 100%,都是自适应。然而:qqmail 就是 css hack 的完善体现,你用任何一个阅读器,多少乎能够看到统一个样子的邮箱,腾讯的前端工程师们用各种 css hack 技巧来展现邮箱页面,为的是同一的用户体验。而 gmail 应用了渐进加强,你的阅读器越强,你看到的后果就越好,用户体验就越好。再后来,就是大家都熟知的 Google 宣布了 android,于是互联网大战从 PC 打到了手机。还有 HTML5 尺度的宣布。手机固然屏幕变小了,然而却供给了更丰盛的功能。还记得以前用诺基亚上 QQ 的事儿吗?咱们拜访的是 3g.qq.com,当时我应用的是复兴的手机,拜访 wap.qq.com,在后来的智能手机都是拜访 m.qq.com。不禁有人问「真的须要为每个手机分辨设计一个网页吗?」、「真的须要为手机跟 电脑设计不同的网页吗?」,解决方式当然有许多种,能够看看 css zen garden(《Css机密花园》仍是很不错的一本书,也附带有网址http://www.csszengarden.com/,值得一看), 相信做过前真个都看过这个网站,一个神奇的网站。终极的解决计划胜出者是响应式布局。响应式布局被大家熟知的一个主要起因就是 twitter 开源了 bootstrap。Google 第一次实现了从前驱到义士。

-----------------------------------

下面再从直观一点的来看,响应式跟 自适应的差别:

首先两种方法解决问题的是不一样的。

自适应是为了解决如何才能在不同大小的设备上浮现同样的网页

自适应网站设计

手机的屏幕比拟小,宽度通常在600像素以下;PC的屏幕宽度,个别都在1000像素以上(目前主流宽度是1366×768),有的还到达了2000像素。同样的内容,要在大小迥异的屏幕上,都浮现出满足的后果,并不是一件轻易的事。

许多网站的解决方式,是为不同的设备供给不同的网页,比方专门供给一个mobile版本,或者iPhone / iPad版本。这样做诚然保障了后果,然而比拟麻烦,同时要保护好多少个版本,而且假如一个网站有多个portal(进口),会大大增添架构设计的庞杂度。

于是,很早就有人假想,能不能"一次设计,广泛实用",让统一张网页主动适应不同大小的屏幕,依据屏幕宽度,主动调剂网页内容大小

自适应网站设计

然而无论怎么,他们主体的内容跟 布局是不变的。

响应式的概念应当笼罩了自适应,而且涵盖的内容更多。

自适应仍是裸露出一个问题,假如屏幕太小,即便网页可能依据屏幕大小进行适配,然而会感到在小屏幕上查看,内容过于拥挤,响应式恰是为了解决这个问题而衍生出来的概念。它能够主动辨认屏幕宽度、并做出相应调剂的网页设计,布局跟 展现的内容可能会有所变动。

简略讲:

什么是响应式(自适应)网站

所谓的响应式网站设计(自适应网站设计),用最艰深的语言来讲,就是通过一个独一的网址,独一的一份网站内容,独一的一份网站代码,通过CSS3媒体查问方法,能够在多种阅读器设备长进行一致的阅读。响应式站点设计的目标是盼望网页设计跟 网页编码可能对用户的操作行动跟 环境进行公道的响应,而这种响应应树立在用户的阅读器屏幕大小、操作平台等。

例如,微软的官方网站可能在桌面阅读器上显示合乎桌面互联网阅读布局的内容展现情势,而在平板电脑、智能手机上则能够依据屏幕的变更而主动调剂内容的布局跟 尺寸,让用户能够在平板电脑跟 智能手机上也取得桌面阅读器上的一致体验。

响应式(自适应)网站的优点

1、晋升用户体验响应式网站斟酌了不同的终端下不同辨别率下的显示后果,假如移动设备阅读传统网站,因为不对移动设备进行过优化处置,所有体验后果绝对会比拟差,响应式网站设计,依据不同辨别率都会呈现的显示后果都进行了现对调剂,大大进步了用户阅读的体验后果。2、节俭时间跟 本钱响应式技巧,固然有时在计划阶段十分耗时,然而从久远来看能够辅助开发职员节俭时间。应用响应式技巧,不须要专门为移动设备从新设计网站跟 重定向。这能够使网站更新变得更简略,由于一个更新就能够解决所有的设备。3、对seo 更加友爱响应式设计会进步搜寻引擎权重。由于一个响应式网页设计只有一个URL,而不是多个页面指向移动设备,防止搜寻引擎因反复内容而下降权重。Google也倡议优先采取响应式设计,由于无论是什么网页版本都是雷同的HTML、雷同的内容,Google最轻易处置。

响应式(自适应)网站的缺陷

1、对老版本IE 兼容不好对ie8及以下版本的ie阅读器兼容不太好,因为响应式网页布局采取html5+css3的一些新特征,而ie8及以下的阅读器对这些都不支撑,这些影响都只是局限于pc机上,而pc机个别都是正常的调配率阅读,所以这些影响都并不是大问题!2、移动端阅读阅读量会发生更多流量因为响应式网站,基础都斟酌了不同终端显示辨别率下的显示后果,所以代码量会绝对较高,同时对移动真个阅读,一些图片并不针对移动端进行过优化,所有会发生绝对较多的流量

哪些网站合适响应式设计

1. 移动App开发者的公司网站跟 独自的App网页;2. 盼望充足应用互联网的初创型公司网站;3. 外贸型企业网站;4. 新式的电子商务网站;5. 面向花费者跟 民众市场的品牌企业网站;6. 新兴互联网媒体跟 网上社区类网站;7. 传统媒体向移动互联网数字化过渡的网站改版;8. 任何不想废弃移动互联网用户的商家跟 个人网站。

Tags:

更多自适应网站设计的相关文章

网站分类
标签列表