网站响应式开发 （一） 概述

网站响应式开发

一、认识响应式互联网设计

参看一文响应式互联网设计

以弹性为基础

作者认为以流动性网格为基础的简单双栏布局，加上若干弹性布局，这种非固定式的布局，更能接受住未来的考验。弹性设计不对浏览器的宽度作任何假设，因而能优雅地适应不论是水平式的还是竖直式的终端设备。

如果只是通过弹性布局，如果是在较大窗口是没问题的，但是当分辨率降低时，就出现压力了，响应式的出现一定程度上解决了这一缺点。

响应式发展

与其为越来越多不同的互联网设备量身定做一个个相互割裂的设计，我们应该把这些设计需要当作同一个体验的不同层面来处理。

引入媒介查询

<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />

W3C在CSS3的规范中创建了媒介查询（media queries），用以在媒介类别的基础上加以改善。媒介查询使我们不仅能针对某些特定的设备类型，还能够对呈现设计的设备的物理特性进行检验。

媒体查询就已成为一项很常用技巧，用以向iPhone、安卓及其他类似的移动系统提供定制的样式表。


<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

通过媒介查询我们能够相当精确地对页面进行重构：包括在小屏幕上扩大链接的目标区，从而更好地遵循触摸屏的费茨定律（Fitts' Law）；包括对某些元素有选择性地显示或隐藏，从而改善页面的导航功能；还包括设置响应式排字法，渐进地改变字体大小和行距，从而为显示设备提供最优化的阅读体验。

未来的路

弹性网格布局flexible grid layout、媒体查询media queries 弹性图片flexible image是响应式互联网设计的三大技术成分。

自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。

响应式布局概念

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式网站是一个设计理念，它是多项技术的综合体。

二、响应式网站的优缺点

优点

减少工作量

网站、设计、代码、内容只需要一份
多处来的工作量只是js脚本，css样式的一些改动

节省时间
每个设备都能得到正确的设计

缺点

会加载更多的样式和脚本资源
设计比较难精准定位和控制
老版本兼容性问题

三、响应式网站的设计原则

兼容性

断点的选择

网站响应式开发（一）概述