响应式网页设计

1.专业术语的英文解释

中文	英文
响应式网页设计	Responsive Web Design
超文本标记语言	Hyper Text Markup Language(HTML)
视口	viewport
媒体查询	media queries
流体网格布局	fluid grid
弹性图片	flexible images
弹性/流式	fluid/flexible
层叠样式表	Cascading Style Sheets （C S S）
前端/后端	Frontend /Backend

专业术语的名词解释

• 响应式网页设计：是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局； 响应式网页设计出来的页面应该有能力去自动响应用户的设备环境，以一种弹性化来适当调整当前页面所适应的分辨率、图片尺寸及相关脚本功能等
  RWD的三项组成科技：

• 弹性/流体网格布局：默认情况下显示适用于[移动电话]的“流体网格”。网格布局其实是根据当前浏览器或手机屏幕所适配的字体大小，当你点击选择进入新的超链接时，显示文本便会根据屏幕缩放自动重排，网页根据视口大小在任何媒体查询之间灵活伸缩修正样式。

• 弹性图片：弹性图片它的效果可以根据我们的用户所在使用的不同屏幕尺寸来改变图片的像素，从而适应当前的浏览环境。以前没有RWD的时候，我们的屏幕只能显示原本设置好的画面大小，并不能具体地调整页面显示的效果。

• 媒体查询：媒体查询可以让我们在某些条件下（如宽度和高度为多少的情况下）为网页应用样式。出自 响应式Web设计HTML5和CSS3实战 一书

• 媒体查询实质上是针对所有的媒体的基本样式，在此基础上，再针对不同能力的设备来加以拓展，从而便于我们达到良好的视觉。

• 可用于媒体查询的特性包括 width，height和color。通过媒体查询，即使不修改内容本身，也可让网页适配不同的设备。

• RWD中的前端和后端的关系、区别？

• 前端就大概等同于网页设计师，后端就是会写程序的网页开发工作者（偏计算机系专业），而我们所学的倾向于前端工程师的内容。

前端：包括网页的设计，制作页面外观以及页面的交互设计，其实就是用户所看到的表象是属于前端的范围。
后端：后端则更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。偏向技术性的开发设计。
关于前端和后端的详细区别

---

2.我们为什么需要“响应式网页设计”？

一直以来，以往的web网页设计多数是根据后端程序员所编写的固定代码来显示页面，并不能根据当前用户所使用的设备来具体调整。这样来一方面不仅得不到良好的用户体验，而且还加重了程序员的工作量，程序员需要编出好多套不同样式的代码。不过到现在，我们可以通过使用RWD来根据用户设备来具体调整显示的页面。

2016-2017年的全球手机、手提、台式电脑市场份额

• 在以往，人们使用的设备更多是台式和手提电脑，但随着科技的发展，手机的应用范围更多，手机开始可以代替电脑的使用。因而，由上图可知，在2016年中下旬（10月左右），手机移动端的使用率开始超过电脑、平板的使用率，市场份额逐渐由手机移动端位居榜首。

2017-2018年的全球移动供应商设备所占的市场份额

• 由此图，我们可以得出移动端的使用率较高，响应式web开发的市场也越来越大，通过RWD应用，我们在浏览网页也会愈加流畅、自然。

那么RWD的优越何在呢？

从化中学网站

• 该网页没有运用RWD，当我们使用手机来浏览其网页，它所显示的图并不完整，缺少画面的动态感和画面感。而且如果我们想在手机上选择一个新的超链接，需要移动或放大才容易点击。

母校-常平中学网站

• 该网页使用了RWD,当我们在网页上浏览，它会自动适配我们的设备，并且可以完整的看到整个页面，画面感也有，我的母校的计算机教师挺有水平的。 从二图对比可知，使用了RWD的页面效果会好很多，可以提高浏览者的阅读兴趣。