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视觉区域汇中展示，但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。
自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”，在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效，因为全部重写代码在这时并不可行。这种案例中，采用自适应布局是一个不错的出发点。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
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结的更多相关文章
- paip.自适应网页设计 跟 响应式 设计方法与工具补充（2）o54
paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...
- 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编程的 ...
- paip.自适应网页设计 同 响应 与设计的原理的差and实践总结
paip.自适应网页设计 同 响应 与设计的原理的差and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- FLASH CC 2015 CANVAS （四）制作响应式设计（自适应）的项目
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...
随机推荐
- C# 判断是否联网
public static class Internet { [DllImport("winInet.dll")] private static extern bool Inter ...
- jquery :checked(过滤选择器) 和 空格:checked(后代选择器)
jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...
- lucene中模糊搜索的应用场景
模糊搜索:wildCardQuery的时候,是用* 表示全部,?表示一个字符,那么直接用*搜索,就能查到当前索引文件的全部数据个数 这里搜索查到的个数和用工具查到的个数是一致的...
- Spring MVC实例（增删改查）
数据库配置文件application-context-jdbc.xml <?xml version="1.0" encoding="UTF-8"?> ...
- linux开机启动
开机过程指的是从打开计算机电源直到LINUX显示用户登录画面的全过程.分析LINUX开机过程也是深入了解LINUX核心工作原理的一个很好的途径. 启动第一步--加载BIOS 当你打开计算机电源,计算机 ...
- Scrum会议10.19
Scrum会议 组名称:好好学习 项目名称:记账本 参会成员:林莉(Master)胡丽娜 宫丽君 汪东涵 时间:2016.10.19 已完成内容: 1.完成新项目的查找,查找学姐的代码和项目. 2.理 ...
- 根据IP获取省市 .
public class IPAddress { /// <summary> /// 得到真实IP以及所在地详细信息(Porschev) /// </summary> /// ...
- 对比poj3050
#include <stdio.h> const int MAXN = 10; const int dir[4][2] = { {-1, 0}, {1, 0}, {0, -1}, {0, ...
- SQLServer 脚本测试
最近在做大数据同步的工作.很少数据需要特殊清洗算法,每次测试,都测试全部数据,浪费时间,可以只测试那些特殊数据即可(切记).
- 巧用Javascript中的slice()
slice()是Javascript中Array的一个方法,定义是这样的. arrayObject.slice(start,end)作用是从原数组中从start到end位置截取出一个新的数组,返回值是 ...