Web响应式布局设计简介

随着移动互联的到来，市面上的移动终端设备越来越多屏幕尺寸也大小不一。就拿苹果的iPhone来说就有多个不同尺寸的版本，还有iPad也是随着技术的进步屏幕大小、分辨率也在变化。更不用说基于开源Android系统的小米、华为、三星等手机和pad了。怎么在网站设计中能够一种设计支持所有终端设备，而不是为每个终端设备制作一套不同的web页面？响应式布局设计就是为应对移动互联网多终端设备而提出的。

响应式布局是2010年由伊桑.马科特（Ethan Marcotte）提出，英文为Responsive Web Design 简写RWD。目的是一个网站能够兼容多个终端（电脑、手机、Pad等）设备，不需要为每个终端做不同的版本。采用响应式布局设计的网站能够根据显示屏幕的大小而变化，页面的排版布局可以自动进行调整，以适应不同尺寸的屏幕，从而为用户提供更方便的阅读和交互。响应式布局简单的说就是一套设计在pc端和移动端都可以使用，并都能给用户提供方便的服务。不需要根据不同的终端做不同的版本。省钱省力！

为形象理解响应式布局我们那bootstrap中文网举例，比如在电脑端、大屏幕下访问网站界面如下，一级导航菜单是在页面的最上边，网页内容布满屏幕，屏幕的利用率也比较合理。

当我们缩小屏幕或者在手机端访问网站的时候，网页对小屏幕自动适用如下，最上边的一级菜单自动变成了下拉菜单。整个网站功能没有变，只是展现形式、交互方式随着屏幕的大小进行了自适应，以更好的满足用户的操作习惯和体验。 

从上例我们可以看出，响应式布局要做到：

1、同一个页面在不同大小和分辨率的屏下整个布局要合理，视觉上要舒服；

2、不同大小的屏幕下同一个页面功能一致，操作方式可能是不同的；

3、对于不同类型的设备交互方式应该符合设备本身的操作习惯，比如触摸屏和鼠标操作；

要使一个网站根据屏幕大小进行响应式的自适应，需要做到响应式布局和响应式内容。实现方式：

1、利用Css和html标签自己写代码实现

media query能够获取终端分辨率的大小，然后根据大小设定布局和样式。

@media screen and (min-width:1000px){...} 对大屏幕的PC端页面

@media screen and (max-width:1000px) and (min-width:768px) {...}        对应中小屏幕的平板端页面

@media screen and (max-width:768px){...}           对应小屏幕的手机端页面

2、利用第三方框架，比如bootstrap

bootstrap生来就具有响应式设计的特性，能够自适应PC、平板电脑、手机等多种终端设备。