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

响应式基本概念

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



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

什么地方用到响应式？

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

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

无响应式的网站

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

响应式网站

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

Web App网站

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

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

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

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

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

自适应和响应式的区别

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



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



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