paip.自适应网页设计 同 响应 与设计的原理的差and实践总结
paip.自适应网页设计 同 响应 与设计的原理的差and实践总结
响应式Web设计(Responsive Web design)的理念是： 1
#---------viewport...同意网页宽度自己主动调整贝儿哪不个网页缩小兰.. 3
响应式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-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。
总之，依据上面四步进行改动的话，能够非常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
版权声明：本文博客原创文章。博客，未经同意，不得转载。
paip.自适应网页设计 同 响应 与设计的原理的差and实践总结的更多相关文章
- paip.自适应网页设计 跟 响应式 设计方法与工具补充（2）o54
paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- Responsive设计 （响应式设计）
一.什么是响应式设计 维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格.” ...
- 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及 使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局,无论用户 ...
- 移动端和pc端，响应式设计布局
1.什么是响应式 Web 设计? 响应式 Web 设计让你的网页能在所有设备上有好显示. 响应式 Web 设计只使用 HTML 和 CSS. 响应式 Web 设计不是一个程序或Javascript脚本 ...
- Grid – 入门必备！简单易懂的响应式设计指南
如今,人们使用各种各样的移动设备访问网页,设计师们需要去适配不同的屏幕,让用户在都能有最佳的浏览体验.Grid 是一个简单的响应式设计指南,按照这些简单的步骤,你的就能够掌握基础的响应网页设计技巧. ...
- 企业级的响应式设计（Responsive design at enterprise level）译
导言 响应式设计是现在人们谈论的热点,但如何部署,特别是在有多种设备的大型项目中如何组织响应式设计,响应式设计和可伸缩性(Scalable)有什么区别?这都是需要解决的难题. 优化用户经验——Opti ...
- 响应式设计：理解设备像素，CSS像素和屏幕分辨率
概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...
- （转）自适应网页设计（或称为响应式web设计）（Responsive Web Design）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
随机推荐
- OCA读书笔记(18) - 使用Support工具
调查和解决问题 问题:数据库中的任一严重的错误定义为一个问题,一般来说,这些错误包括大家熟悉的ORA-600错误和ORA-04031(共享池超出)错误,涉及数据库问题的所有元数据都存储在ADR中,每个 ...
- 数据结构 《18》----RMQ 与 LCA 的等价性 (一)
前言 RMQ: 数组 a0, a1, a2,..., an-1, 中求随意区间 a[i+1], a[i+2], ..., a[i+k] 的最小值 LCA: 求二叉树中两个节点的最低公共 ...
- ListView IllegalStateException
贴出源代码: android.widget.ListView ... if(mItemCount == 0){ resetList(); invokeOnItemScrollListener(); r ...
- 使用C++名单在文档处理和学生成绩管理系统相结合
对于学生成绩管理系统,我并不陌生,几乎学习C人的语言.做项目会想到学生成绩管理系统,我也不例外.在研究中的一段时间C语言之后,还用C语言到学生管理系统,然后做几个链接.计数,这个系统是以前的系统上的改 ...
- malloc功能具体解释
一.原型:extern void *malloc(unsigned int num_bytes); 头文件:#include <malloc.h> 或 #include <alloc ...
- 第三届蓝桥杯C++本科B组决赛解题报告（更新中）
<1>星期几 9 package JiaNan; import java.util.Calendar; import java.util.GregorianCalendar; public ...
- SVA(system verilog assertions)基础
1什么是断言: 断言就是在模拟过程中依据我们事先安排好的逻辑是不是发生了,假设发生断言成功.否则断言失败. 2断言的运行分为:预备(preponed)观察(observed)响应(reactive). ...
- [TWRP 2.8.4] for 小米2S/2SC 支持中英文切换
其中这个 twrp 2.8.4 在18号的下午已经编译好了. 经历了2个小时的代码修改,再经过后期的调试,中英文双语版本的twrp出炉了. 下面上几张图: 图片1:为英文界面 图片2: 图片3:中文界 ...
- Facebook Hacker Cup 2015 Round 1--Corporate Gifting（树动态规划）
原标题:https://www.facebook.com/hackercup/problems.php?pid=759650454070547&round=344496159068801 题意 ...
- linux 下安装jdk及配置jdk环境图解
linux 下安装jdk及配置jdk环境图解 一:先检測是否已安装了JDK 运行命令: # rpm -qa|grep jdk 或 # rpm -q jdk 或 #find / -name j ...