响应式开发从原理到实战案例（一）：响应式基本概述

响应式基本概念

响应式就是指同一个页面，在不同大小的屏幕上显示对应风格。如下图所示

响应式的主要特点：页面的代码不变，根据屏幕的大小调整布局（什么样的布局是由前端人员来设计）

什么地方用到响应式？

• 网站的内容并不是很多，如：公司的官网、宣传页面、产品列表、图片列表
• 使用响应式网页的特点：页面的内容比较少，布局也不复杂

为了更加直观，我们对比一下。

无响应式的网站

• 淘宝网
• 京东网
• 腾讯课堂
• 百度传课

响应式网站

• 知创科技的官网
• bootstrap官网
• 36氪
• 阿里Web App开发框架 SUI

Web App网站

•   联想手机官网
•   小米商城
•   一元云购
•   京东手机网

通过对比上面的网站，我们可以总结出这样的内容：

1. 内容比较简单的页面适合做响应式，提升用户的体验
2. 网页的内容比较丰富、类别比较多，如京东、天猫、淘宝网。这样比较大型的网站不宜做响应式。而是独做Web App来取代
3. PC端对应的移动端网址喜欢用 m.域名的方式。例如：m.taobao.com   m.jd.com。

在工作上，什么情况下会考虑做响应式开发了？可能有下面的几种情形。

• 老版本网站改版升级要求支持响应式
• 中小型网站会考虑响应式应用
• 很多企业为了快速获取用户，会优先开发移动端，然后扩展到PC端。

自适应和响应式的区别

自适应：解决如何才能在不同大小的设备上呈现同样的网页(页面的内容和布局不改变)

响应式：根据不同的设备做出相应的调整，调整布局或是元素（页面的内容和布局是有改动的）

------------------------------------下一节的内容是：《制作没有响应式的静态页面》------------------------------------