响应式网站设计建设是什么意思？

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

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

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

  响应式网站要做到：

  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、平板电脑、手机等多种终端设备。