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

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. leetcode 5 Longest Palindromic Substring(Manacher算法求最长回文串)

    应用一下manacher算法就可以O(n)求出结果了.可以参考hdu3068 substr(start,length)函数是这样用的: substr 方法 返回一个从指定位置开始,并具有指定长度的子字 ...

  2. BeanUtils介绍及使用

    JavaBeans事实上有三层含义.首先,JavaBeans是一种规范,一种在Java(包括JSP)中可重复使用的Java组件的技术规范,也可以说成我们常说的接口.其次,JavaBeans是一个Jav ...

  3. Android之SharedPreferences权限

    import android.app.Activity; import android.content.SharedPreferences; import android.os.Bundle; pub ...

  4. 【leetcode刷题笔记】Populating Next Right Pointers in Each Node II

    What if the given tree could be any binary tree? Would your previous solution still work? Note: You ...

  5. LG3533 [POI2012]RAN-Rendezvous

    2791: [Poi2012]Rendezvous Time Limit: 25 Sec  Memory Limit: 128 MBSubmit: 259  Solved: 160[Submit][S ...

  6. github 在线 创建文件夹

    参考: http://webapps.stackexchange.com/questions/36411/create-a-folder-in-github-via-the-web-interface

  7. python中http请求中添加cookie支持

    python3中构造http的Request需要用到urllib.request. 有时会用到cookie. 比如在访问网站首页得到cookie,通过下面代码添加cookie:      #insta ...

  8. log4net 使用

    1. 代码中使用配置文件: log4net.Config.DOMConfigurator.Configure(new FileInfo("log4netConfig.xml")); ...

  9. 上海-北京间通过Azure Storage的RA-GRS类型的存储账户进行快速复制

    Azure的Blob存储分成多种类型,目前主要有: 其中RA-GRS可以在上海-北京两个数据中心间同步数据.并且,在第二个数据中心可以只读的方式读取这个存储账户中的Blob内容. 虽然GRS采用的是准 ...

  10. nginx的安装及基本配置

    在CentOS7(mini)上安装: [root@~ localhost]#lftp 172.16.0.1 lftp 172.16.0.1:/pub/Sources/7.x86_64/nginx> ...