响应式布局设计

一   什么是响应式？( 小编我喜欢用自己的白话进行说明，虽然很low，但易懂)

 响应式就是在不同的设备下以不同的布局方式展示给用户，意思就是无论你怎么对浏览器的宽度或高度进行缩放都能以不同的样式展示给用户并能正常显示。

二  响应式的技术实现？

1.流体布局

      其实就是度量单位的改变。在响应式设计的布局中，不在把像素(px)作为唯一的单位，而是采用%或者是混合%、px为单位，设计出自己想要的布局方式。

2.媒体查询

        媒体查询可以在你根据特定的环境下查询到各种属性---------比如设备类型，分辨率、屏幕物理尺寸以及色彩等。通过使用媒体查询，可以获得设备的一些特性，以及响应式的布局方案。

3.弹性图片

        其实在做响应式布局时，大多用到的是弹性盒子进行布局，那么在设置图片的地方也应该具有一些变化以适应布局的变化。出了图片外，像图标啦！视频啦也应做一些调整用以适应布局的变化。

三 图例

四  优缺点

           优点

1.根据不同的分辨率显示不同的比例，但是内容是差不多的。

2.开发成本低、门槛低！

缺点

1、加载需要一定的时间 ，虽然它不是一个大问题，在响应式设计中，需要下载一些看起来并不必要的HTML/CSS。除此之外，图片并没有根据设备调整到合适大小，而这正是导致加载时间加倍的原因。
2、优化搜索引擎 对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户，移动用户多采用不同的关键字，修改标题及其他事项都比较困难。
3、时间花费 开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，最好从草图开始重新设计。