Responsive web design (oftenabbreviated to RWD) is an approach to web design in which a site is crafted toprovide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, andscrolling—across a wide range of devices (from desktopcomputer monitors to mobile phones).响应式网站设计有三个关键组成部分：1.media query; 2. 流动网格；3. 灵活缩放的图片。 基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。
一、什么是响应式网站？
响应式网站设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面计算机、平板计算机到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。
Responsive web design (oftenabbreviated to RWD) is an approach to web design in which a site is crafted toprovide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, andscrolling—across a wide range of devices (from desktopcomputer monitors to mobile phones).响应式网站设计有三个关键组成部分：1.media query; 2. 流动网格；3. 灵活缩放的图片。 基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。
二、响应式网站有哪些优势？
1.智能化
响应式网站其中最大的优势就是具备智能化的设计，这种网站可以因为每个客户设备的终端不同去自动调整网站的显示方法，让企业的网站几乎可以适用所有的的终端显示。并且可以在浏览的时候去调整网站的宽度，最大程度上提高用户的网站提体验感，无论怎样都不会出现布局紊乱或者是乱码的情况。
2.节约成本响应式网站可以适用不同的终端，这样建立一个网站就不用因为终端不同再去花几份建站的钱去制作不同终端的网站了，最终可以实现一站多用的效果，可以节约不同的PC端或者手机端建站的费用。3.融入SEO一般在建设响应式网站的时候，都会根据SEO的原理去设计，为了客户后续更好的使用优化推广，通常在内容和代码编写上，按照SEO原理进行设计，让网站天生具备SEO基础。
三、设计响应式网站有哪的小妙招？
1.确保性能是你主要的目标
不管现在移动设备的网络连接速度有多快，在建立网站时都推荐为设别配备慢的网络连接。例如，由于4G网络在现代国家是受限制的，因此你需要特别注意设计移动友好的网站，能在2G和3G网络上完美的运行。确保网站的加载时间非常迅速。
2. 采用‘图像’方式对于每一个响应式网站，图像是一个很关键的元素。不像基于桌面的门户网站，一张很大的图片可以一个很好的指引。在移动优化的网站上使用一张这样的图片，对于网站所有者并没有好处。因此，需要裁剪图片或者整个删除图片，原因非常简单，小屏幕的移动设备没有能力按照预期的方式显示图片。在为不同的移动设备设计网站时，采取一个合适方便的图片管理计划并遵守它。有些情况下，你需要为桌面和其它移动访问者创建一个图片的多版本。
3. 避免包含导航菜单
由于响应式网站的目标是类似平板和智能手机的小屏幕，所以建议隐藏主菜单导航。可以选择用图标结合可以提示用户菜单的方式代替。例如，你可以设计一个简单的下拉式菜单，它可以滑下或者扩展到覆盖整个屏幕。这也意味着，如果导航包含的元素超过三个，你可以只设计一个可以打开特定菜单的图标。