响应式布局的核心是:适配不同视口大小的流式布局。

RWD和AWD

RWD:Responsive Web Design

AWD:Adaptive Web Design

实现RWD,多使用流式布局。针对所有不同类型的客户端类型设置了几个不同的断点,浏览器收到页面之后会识别其中的css 媒体查询而使用不同的css声明,适配自己的尺寸(分辨率等)来选择css规则。
AWD,不同之处就是针对不同类型,包括不同尺寸,不同分辨率等等客户端的特征,在服务器端选择/生成不同的布局,传给客户端的布局是固定的。也就是说服务器在接收请求时,需要客户端提供有关尺寸、分辨率等等信息。
前者是客户端选择最终的布局。后者是服务器选择布局提供给客户端。

HTML5 _响应式设计https://msdn.microsoft.com/en-us/magazine/hh653584.aspx

 

参考

  1. this is reponsive——github——响应式网站的高级模式与案例
  2. 《精通CSS-高级web标准解决方案》第三版
     

以下是有关AWD和RWD的比较的文章,可以参考

  1. https://drafts.csswg.org/css-device-adapt/——CSS device adaptive module
  2. adaptive web design——免费电子书
  3. https://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
  4. https://www.graphicsmerlin.com/responsive-vs-adaptive-web-design-2019/
  5. https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

响应式Web的更多相关文章

  1. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  2. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  3. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  4. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  5. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  6. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  7. 响应式Web初级入门

    本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...

  8. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  9. 推荐35个新鲜出炉的响应式 Web 设计实例

    响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...

  10. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

随机推荐

  1. PS 滤镜— —Twirl Filter

    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...

  2. poj2395

      #include<iostream> #include<cstdio> #include<algorithm> #include<cstdlib> ...

  3. A唐纳德先生和假骰子(华师网络赛)

    Time limit per test: 1.0 seconds Memory limit: 256 megabytes 在进行某些桌游,例如 UNO 或者麻将的时候,常常会需要随机决定从谁开始.骰子 ...

  4. Linux CentOS 6.5 64位 静默安装Oracle11g 云主机

    本例: 通过SSH远程连接云主机,上传oracle11g安装包,在centos6.5上无图形化界面静默安装oracle11g. 涉及工具及环境: 1.本地环境windows7+ssh远程连接工具xSh ...

  5. idea-spark-sbt 打包jar

    1.打开idea下的terminal窗口 2.只打包部分项目 sbt insight-import/clean  insight-import/assembly 这表示只打包主目录下的insight- ...

  6. js中的setInterval

    跟几个例子吧 计时器的例子: /** * Created by Administrator on 2016/8/5. */ (function () { function show() { var t ...

  7. 宽字符wchar_t和窄字符char区别和相互转换

    转自:http://blog.csdn.net/nodeathphoenix/article/details/7416725 1.    首先,说下窄字符char了,大家都很清楚,就是8bit表示的b ...

  8. nodejs调用delphi编写的dll

    公司的业务需要,nodejs要读取文件版本号. 同事要求我用delphi编写dll,以供nodejs调用,结果通过json返回. delphi代码如下: function GetFileInfo(AP ...

  9. 问题:C#发布的项目浏览时出现“Server Application Unavailable”错误;结果:Server Application Unavailable出现的原因及解决方案小结

    Server Application Unavailable出现的原因及解决方案小结 作者: 字体:[增加 减小] 类型:转载 时间:2012-05-23 今天在服务器安装了个.net 4.0 fra ...

  10. C基础题-sizeof

    sizeof  C语言中判断数据类型或者表达式长度符:关键字:字节数的计算在程序编译时进行,而不是在程序执行的过程中才计算出来! 一.关于sizeof简单的总结 1.sizeof的使用形式:sizeo ...