响应式网页设计

名词解释：

• 1、响应式网页设计： 响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式 一个网站兼容多个终端。
  同样的代码 通过设备适配 满足不同的访问设备 能展现出不同的效果 始终内容优先 移动设备优先:不引人注目的js和逐渐增强 基于浏览器:特性活设备探测的逐渐增强
• 2 CSS预处理器（Sass、LESS、Stylus、PostCSS）

可以帮我们组织代码、变量、颜色操作和数学运算理器，CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。PostCSS这样的工具可以帮我们完成添加浏览器前缀这样烦琐的任务。另外，一些清理和验证工具可以帮我们检查HTML、CSS和JavaScript代码是否符
合标准，自动提示输入错误和语法错误

• 3、前端:

网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和[前端开发]，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

• 4、后端
  简单来说就是网站管理开发后台 来进行浏览数据 发布信息等一系列工作

后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

响应式网页设计的必要性

360截图20180310165207394.jpg

在2013年之前 大家习惯在计算机上进行浏览网页 而在2013 年之后智能手机超过了功能手机 可见移动端访问网页的浏览量肯定是各大浏览器的必争之地 然后随着智能手机的价格的低廉和功能的多样化导致响应式网站设计的必要性 大大提高

响应式网站的好处：
　1、有助于接触更多手机和平板电脑用户：
　　响应式网站的兴起是平板电脑和手机有大量普及以及互联网使用不断增加的必然结果。响应式网站的最大优势在于能兼容各种设备，而非使用传统方式将用户跳转至设备专用网站。
　　许多经营在线业务的用户仍不理解何为响应式设计布局，但是他们迟早需要深入了解相关概念。若您正为了接触更多客户而寻求优化在线内容，采用响应式设计网站不失为一个理想的选择，因为平板电脑的销量今年预计将超过一亿台。制作无论屏幕大小都可以高效响应的网站从未像现在这样重要。随着移动设备的多样化，有些网站的流量甚至出现了 50% 的增长。
　　2、提高转换率和销量：
　　响应式网站意味着您无需在网站设置跳转，从而极大完善了用户体验，这也是响应式网站的最大优势所在。另外，使用集成式设计和 CSS 表单一类的功能使网站无论在何种设备上都能营造出风格一致的感觉和外观。若熟悉这种布局，用户可以在任何设备上轻松浏览您的网站，进而提高转换率。
　3、有助于搜索排名：
　在搜索引擎(尤其是谷歌)中排名靠前是每个网站的终极目标，具有响应式设计布局的网站有助于达成这个目标。首先，维护此类网站所需的时间缩短，响应式网页开发让您集中精力维护管理一个兼容所有设备的网站，谷歌已明确表示支持响应式技术。
　4、报告和分析整合：
　若使用传统网站而非响应式网站，您就需要多个网站来适应不同浏览平台。这让您跟踪网站的访客总数、单个和总体转换率以及从一个网站移至另一个网站的访客数量变得十分困难。与之形成鲜明对比的是，响应式设计网站配有优化的分析程序，可处理响应式报告并应对多台设备，把所有分析和报告整合为一份，在简化监控和维护的同时继续保证网站正常运行。
　5、节省开发投入：
　摒弃传统网站，选择响应式网页，单从开发阶段就能为您节省大量时间和金钱。别忘了为不同的设备同时开发多个网站，意味着后期也需要更多的开发支持费用和维护成本。您最好将响应式网站测试技术运用到响应式网站，这将大幅减少您的支出。(来自一个互联网公司的介绍响应式网站的好处的宣传语 个人推测这是它主打产品：定制响应式网站

上述这些体现出响应式网站设计的必要性 和必需性

使用响应式网站设计和没使用的差距

https://www.opera.com/zh-cn 这是一个使用了响应式网站设计的互联网公司的一个浏览器产品主页

360截图20180310234732836.jpg

360截图20180310234814203.jpg

360截图20180310234958804.jpg

http://www.nfsysu.cn/这是我学校官网 完全没有使用

360截图20180310235046405.jpg

360截图20180310235116522.jpg

两者之间的差距在于 使用的可以给移动端用户提供许多的便利 不用放大和移动网站 来寻找自己想要的东西 窗口缩小时：
响应式网站能自适应，响应式的设计使浏览人达到非常好的体验效果，字体与图片的比例也很合适阅读。
旧站无法自适应，信息显示不全，必须依靠滑动条才能阅读，体验效果极差。

响应式网站设计的三项组成技术

• 弹性网格布局

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。
1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
总结：
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。
流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。

• 媒体查询 :

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

• 弹性图片/媒体
  在小屏幕上可缩小尺寸，并可扩展大最大尺寸以支持大屏幕的多媒体内容和图片

关于提出RWD概念的文章相关链接https://alistapart.com/author/emarcotte

RWD和前后端的关系h前端 就是我们看到这个网站的样子 很美很漂亮 也很符合我们的使用和求

后端 我只能说这对于网站设计和开发人员来说这可能是噩梦吧 毕竟需要进行一系列的工作 去让它从一个女神经变成一个女神 这不是很简单的让她穿上水晶鞋 带上王冠 坐上那辆南瓜车那么简单
RWD 则是基于这二者