paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

By | 05月02日
Advertisement

paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

响应式Web设计(Responsive Web design)的理念是: 1

#-----------自适应布局VS响应式布局 2

设计思路Mobile First 2

#---手机and平板分辨率 3

#---------viewport...允许网页宽度自动调整贝儿哪不个网页缩小兰.. 3

#----------处理图片缩放的方法 3

#----选择加载CSS Media Queries 3

#=====3、布局宽度使用相对宽度(弹性布局) 4

#-----4、页面使用相对字体 4

流动布局(fluid grid) 流体布局,弹性布局 5

#----游戏网页的特别的设计 5

#------移动端/桌面端内容自适应 5

#-------图片背景的自适应 6

大尺寸图片的响应式设计 6

混合使用自适应AWD and RWD 6

参考: 6

响应式Web设计(Responsive Web design)的理念是:

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方 面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说, 页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不 断到来的新设备做专门的版本设计和开发了。

2010年,Ethan Marcotte提出了“Responsive Web Design”这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。使网站的页面布局能够根据不同设备和分辨率进行自动调整。

作者 老哇的爪子 Attilax 艾龙, EMAIL:[email protected]
转载请注明来源: http://blog.csdn.net/attilax

#-----------自适应布局VS响应式布局

问:“什么样的网站/项目适合使用自适应布局(固定断点)?什么样的网站适合响应式布局?(流体网格)”

答:理论上来说,响应式布局在任何情况下都比自适应布局好一些,但在某些情况下自适应布局更切实际。

自适应布局可以让你的设计更加可控,因为你只需要考虑了了几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的,大部分状态之间的区别很小,但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题,你很难有绝对的把握预测到它会怎样。换个角度说,这也是响应式布局的魅力所在。通过允许表面上的不确定因素存在,你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示,但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。

自适应布局有它自己的优势,因为它们实施起来代价更低,测试更容易,这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”,在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效,因为全部重写代码在这时并不可行。这种案例中,采用自适应布局是一个不错的出发点。Dan Cederholm 在他的文章《Adapted》中也曾说过,这种办法是可行的。

responsive-screens

设计思路Mobile First

Mobile First(从移动端开始,RWD ):
一切从最小屏幕的手机端开始(比如 iPhone 的 320px ),先确定内容,然后逐级往大屏幕设计。
不同于原来网页设计,总是从桌面电脑的 1024px 开始的。

#---手机and平板分辨率

手机正常的2.8 --3.5--4.5 分辨率是320*480

平板好像是600*840

#---------viewport...允许网页宽度自动调整贝儿哪不个网页缩小兰..

下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

#----------处理图片缩放的方法

简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。

img { width: auto; max-width: 100%; }

#----选择加载CSS Media Queries

自适应网页设计"的核心,就是CSS3引入的Media Query模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px,那么可以这样写

@media screen and (max-width: 980px) {

#head { … }

#content { … }

#footer { … }

}

例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关css样式的id标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) {

#divMain{

float: none;

width:auto;

}

#divSidebar {

display:none;

}

}

#=====3、布局宽度使用相对宽度(弹性布局)

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。

#-----4、页面使用相对字体

在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),两者换算关系是:em = px*16 ,例如16px就等于1em。

总之,根据上面四步进行修改的话,可以很简单地将一个网站修改为适合多种设备浏览的页面,这对于通过手机访问网站的用户来说,的确是一件好事。

流动布局(fluid grid) 流体布局,弹性布局

"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
  .main {
    float: right;
    width: 70%;
  }
  .leftBar {
    float: left;
    width: 25%;
  }
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
另外,绝对定位(position: absolute)的使用,也要非常小心。

#----游戏网页的特别的设计

游戏网页因为必须显示在第一个屏上,所以,普通的自适应设计需要有些更改..

假如游戏为了纵向设计, 假如平板旋转,要是还是100%宽度显示,走游戏不能显示满的第一的屏...这样,就要使用jquery 获得屏幕宽度,要是纵横比,不是纵向的,就要限制一个最大宽度,可以显示第一的屏..

#------移动端/桌面端内容自适应

在服务器端操作 HTML 内容(比如为移动端减少内容,为桌面端提供更多内容)

许多的框架能实现这个.贝儿就要使用js/后台语言判断来实现..

值得收藏的14款响应式前端开发框架-CSDN.NET.htm

#-------图片背景的自适应

使用css3 or 使用一个zindex=-5的图片,width 100%

大尺寸图片的响应式设计

Filament组提出了另外一种技术不仅是正确地设置图像的尺寸,在较小的设备中为了节约空间,还降低图像的分辨率,加载时间和移动宽带(流量)。

这种技术需要一些文件,这些文件都在Github:一个JavaScript文件(rwd-images.js),Htaccess文件,和一张图片(rew.gif),然后,在HTML代码中,我们引用两种图片:一个小的“R”前缀,必须适应(“响应”)和大的data-fullsrc(HTML5启用的一个属性,更多详情可以访问这个页面)。

实现这种技术,看起来如下:

img <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

当屏幕尺寸大于480px,页面就去加载大图片(largeRes.jpg)。JavaScript插入元素是可以允许页面分离适应的图片。当页面 加载完成,除了大或者小图片会根据预先的设置来加载之外,所有文件都会正常的加载下来。如果这技术不起作用,所有的(大的和小的)图片都被加载下来,这样 就会浪费宽带,反过来说,这技术防止了不必要的图片加载下来,另外它是兼容现代浏览器(包括IE8)和移动设备的。

混合使用自适应AWD and RWD

参考:

网页自适应的实现方法(网页分辨率不同以及手机和电脑网页的切换)_移动互联网开发_百度空间.htm

译文:自适应布局VS响应式布局以及最佳表单字段标签_Ryanwang_新浪博客.htm

手机web——自适应网页设计(html_css控制)_唐老鸭光光_百度空间.htm

自适应响应式设计 w3coo_CSS3-w3coo.htm

Similar Posts:

  • 新兴的网页开发设计模式-响应式WEB设计

    移动设备越来越趋于互联网使用的中心, 笔记本.智能手机.上网本.iPad.电子书等各式各样的设备,尺寸/分辨率不尽相同. 这为网页设计带来了新的挑战,也带来新的机遇,有可能"一次编写,随处呈现"吗? Ethan Marcotte在2010年提出响应式WEB设计的概念, 简洁.响应式WEB设计是一种与设备无关的内容呈现方式,能在桌面.移动设备以及宽屏设备上有同样好的表现. 本文先是简单的描述了响应式WEB设计在前端设计栈中的位置,然后描述了其构成. 为什么响应式WEB设计很重要? 如今,

  • Bootstrap响应式设计在中国-关于移动网站和卓越网站体验的那些事儿

    为移动而生-更窄的网页并不是移动网页 提供完整的用户体验,打通移动端与客户端的区隔,这在中国互联网业界已经没有什么好争辩的了,然而天国总是有天国的实情,比如人们对于移动网站的理解,从早年的"短信网址"笑料收场,到现在的微信上诸多"伪微门户"泛滥,离真实的移动用户体验相差很远. 比如下图是一个热门微信颁发出来的"微门户"页面,其实和早年的wap网站制作一样,只不过是做了一个"更窄"的网页,并没有理解移动设备的真正需求. 在移动设

  • 非响应式设计也可以用Viewport Meta标签

    源文章地址:http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design 我相信你肯定用了 viewport meta tag 来做响应式设计,但你是否知道 viewport 标签对非响应式设计业是非常有用的?如果你还从没将你的网站转换成为可响应的,就应该好好看下这篇文章,我会教你怎用用viewport标签提升你的网站对移动设备的响应能力. 一般使用Viewport标签的场景 Viewport m

  • 移动端开发-viewport实现响应式设计

    1. 不使用viewport出现的问题 提到响应式设计,大家首先想到的可能是 Bootstrap , @media .前者是一个响应式UI库,风格比较扁平化,类似的还有雅虎的[email protected]是CSS3的属性,利用它可以在不依赖其他库的情况下实现响应式设计.如果你使用过媒体查询,应该熟悉下面的代码: 可查看github下载实例代码 @media screen and (min-width: 960px) { body { background-color: blue; } } @media

  • 10个实用的响应式设计测试工具

    响应式的设计现在越来越受设计师推崇,面对这越来越多的响应式设计页面,我们需要找到高效的测试工具来验证设计的合理和正确,文中所介绍的工具可以帮助你测试响应式页面设计. Viewport Resizer Viewport resizer是一个基于浏览器的工具,它可以让用户测试任何网站的响应特性.用户只需要保存的书签,访问他们想测试页面,点击创建的书签并检查该页面在所有类型屏幕分辨率上的表现. Resizer Resizer也是一款非常棒的工具,允许你改变网页尺寸.一旦安装,它可以很容易地使用.你只需

  • 响应式设计就是这个时代最值得学习、时间的趋势

    网页设计是一个时效性很强的行业,我们需要紧跟趋势潮流,不断学习.响应式设计就是这个时代最值得学习.时间的趋势. 网络术语真是越来越流行了,现在即便是客户,也略知一二,很多客户对设计的了解也不浅.那么怎么说服客户呢?下面我将讲一点和客户沟通的技巧,让客户接受响应式设计(相应的,工钱你懂的). 投其所好 在任何项目的开始阶段,都要明白.了解.分析客户的需求. 在满足客户预期的基础上,尽量让客户能够完全的理解你的设计. 你要知道客户想要什么.在你的大脑中转换成术语后,再用平易近人的语言讲出来. 例如,

  • ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第1章 HTML5、CSS3及响应式设计入门

    响应式网页设计:弹性网格布局.弹性图片.媒体和媒体查询 如果要用一句话概括响应式网页设计,我觉得它是针对任意设备对网页内容进行完美布局的一种显示机制.相反,如果需要根据不同设备提供特定的内容和功能,那就需要一个真正的"手机版"网站 使用相对度量单位em或百分比 chrome插件 Windows Resizer 先针对小视口进行设计,然后逐步针对大视口进行渐进增强支持 在预算允许的情况下,一个完全定制的"移动"版网站比响应式设计更合适 渐进增强用户体验 <!DO

  • 网站设计:复杂产品的响应式设计流程

    都说2013年将是响应式设计爆发的一年.一淘设计团队在去年一淘首页改版时初步尝试了响应式,最近在一淘"玩客"项目中有了更加深入地应用,第一次在复杂产品中实现了全站响应式.中间积累了一些经验也踩了不少坑,于是就有了这个响应式设计三部曲,此系列文章包含理念篇.知识篇和流程篇. 响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计.前端和开发团队之间的协作模式带来新的挑战.在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪

  • 响应式设计你需要了解的知识点

    响应式设计就是在网站开发过程中根据用户操作以及设备的环境进行相应的操作和布局,让网站针对不同系统平台.屏幕尺寸.屏幕定向等进行智能化调整,进行相对应的布局,如在pc端.iphone.Android.ipad,实现了在智能手机和平板电脑等多种智能移动终端浏览效果的流畅,防止页面变形,能够使页面自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备,并可在任一浏览终端进行网站数据的同步更新,可以为不同终端的用户提供更加舒适的界面和更好的用户体验. 一.响应式有什么优势? 响应式设计在面对不同分辨率

  • 【media-queries】媒体查询,为了响应式设计而生

    目录 简介 语法 常用尺寸 一 简介 针对现在纷杂的设备,css3中加入,可以查询你的浏览类型(screen彩色屏幕, print, all)和css属性判断. 最常用的就是查询屏幕大小,给予适合的展示效果,即流行的响应式设计(Responsive Design). 二 语法 1 简单的例子 @media only screen and (max-width:320px) { .container { width:90%; padding:0 4%; } } 前半部分是media-type查询,

Tags: