业务背景

项目现在在使用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)

示例

1
2
3
4
5
6
7
8
9
10
11
<!-- 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