移动端的设备占据了人们大部分的日常生活，无论是购物、聊天、找工作还是看新闻视频玩游戏，任何场所地点都能满足人们的需要。而随着移动端设备的广泛流行，网页设计也进入到了一个新的不同的阶段，平常在pc端浏览的网页出现在各个分辨率不同的移动端时，页面效果发生了变化，各种问题接踵而来，而网页建设者们为了更大地改善用户体验想尽了不同的办法，响应式设计就应运而生了。

        所谓的响应式设计就是一个页面根据不同设备的分辨率展示出不同的效果，那它是怎么实现不同分辨率出现不同的展示样式呢？

第一：为了适应屏幕，多数的移动端浏览器会把html网页的的宽度缩放成屏幕的宽度（这也是普通网页在移动端变小不清晰还可以缩放的原因），而我们可以设置页面head里的meta标签的viewport属性，<meta name="viewport" content="width=device-width, initial-scale=1.0">，我们也可以设置其他的属性

头部添加viewport标签后，html结构布局和平常一样抒写就可以.

第二：css部分是最主要部分，我们在设置页面宽度的时候最好不要用绝对单位值px，而是用%百分比。在写完特定的一个css样式之后，可以使用Media QueriesCSS3 media query ，它像一个if语句，告诉浏览器根据屏幕的宽度调取相应的css：

上面的图片就是说当屏幕不大于410px的时候就采用下边的样式。

由此可见，响应式设计，其实是根据多个屏幕分辨率写了不同的css样式，从而实现不同的布局展现出的不同的效果。虽然它可以使页面效果看起来比较统一，但是也有一定的缺点，就是代码工作量大，比较繁琐