我所理解的响应式设计

业务背景

项目现在在使用IBM V6的模板，由于涉及内部金融业务的支付系统，所以每次升级都非常慎重（恩，采取了能不升级就不升级的策略方针）。IBM现在内部都使用V18的模板了，想想落后了多少年啊….但是为了响应公司MobileFirst号召，项目决定可以先让一些Approve页面支持Apple设备。于是把一些响应式设计理念，以及CSS3的新属性，应用到项目里去，这是自己关于PC、移动设备上响应式网站的一次实践的总结。毕竟现在是响应式烂大街的情况了，有些浅显，但是，在实践及总结的过程中，理解了很多原先并不明确的知识，有一些自己的心得和体会，希望能对有做响应式的同学有帮助，如有不正确的地方跪求指出。

设计原则

移动优先
优先考虑页面多终端展示（移动设备，PC，Mac等等）
渐进增强
为了发挥更大的硬件设备的功能和效率，从下往上兼容（但是个人认为没有必要费力去做IE9以下的兼容，比如IE6啊，IE7啊，不支持CSS3的浏览器啊，稍后我们说不支持原因）

响应式的选择

1.Javascript （效率极低）
2.CSS3（media-query简单，推荐，适合运行多年的业务系统）
3.开源框架（比如Bootstrap，AmazeUI,EasyUI等等，推荐，模板多）

到底选那种？
其实我们讨论之后，首先就抛弃了第1种，也抛弃了第3种，采取了第2种方法。
因为Procurement的系统是2008年开发的，很多标签比较老，这么多年也没有进行大的系统变更，废弃现在的页面去使用Bootstrap框架，工作量太大不说，由于IBM内部系统也有自己的一套样式模板和开发模板，所以Bootstrap的方案也是不可行的。
我不会具体在这里详细说我们是如何实现的，毕竟商业项目，Confidential啊！哈哈，但是我肯定会把你领进响应式设计的大门！具体不懂的，可以评论留言。

Media-Query属性

你这么理解就可以：为不同的大小的设备规定了类似于import的CSS规则，保证了实际渲染完成页面的效果，当然也可以为一个页面准备多个不同的CSS样式、

设备屏幕宽高

device-width,device-height
就是你物理设备大小，比如5.5寸iPhone的大小，4.7寸android的大小等等

渲染窗口宽高

width,height
这个就是指你窗口大小，比如我可以把窗口最大化啊，拉伸啊，缩小啊等等

设备方向分辨率

orientation,resolution
比如Mac的Retina屏幕分辨率大小和PC分辨率大小就不一样（最典型的，你在PC截图和Mac截图，然后上传到网上，你就发现，图片大小不一样，就是分辨率和DPI的原因，这2种概念自行Google）

示例

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="link.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .test {
    display: none;
  }
}
</style>

有一篇文章我觉得写得很好，虽然文章是3年前写的，但是对于新手，或者进阶来说，可以避免走很多弯路。
https://isux.tencent.com/code-of-response-web-design.html