paip.自适应网页设计 同 响应 与设计的原理的差and实践总结

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:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax

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

 

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

 

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

 

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

 

  自适应布局有它自己的优势,由于它们实施起来代价更低。測试更easy,这往往让他们成为更切实际的解决方式。

自适应布局能够看做响应式布局的“穷兄弟”。在资源有限的情况下就能够让它出马。

特别是改进现有站点的时候尤其奏效。由于所有重写代码在这时并不可行。这样的案例中。採用自适应布局是一个不错的出发点。

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-BlogWordPress相关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

 

 

总之,依据上面四步进行改动的话,能够非常easy地将一个站点改动为适合多种设备浏览的页面。这对于通过手机訪问站点的用户来说,的确是一件好事。

 

 

 

流动布局(fluid grid 流体布局。弹性布局

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

 

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

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

 

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

 

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

在server端操作 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

版权声明:本文博客原创文章。博客,未经同意,不得转载。







本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/4664409.html,如需转载请自行联系原作者


上一篇:Python学习(9)--for和while循环


下一篇:【轻松前端之旅】标签