TAT.Minren 响应式设计
In CSS3,HTML5,Web开发,移动 Web 开发 on 2014年01月23日 by view: 32,890
10

网上的教程好复杂,我写一个简版的。

简单说呢就针对不同的屏幕分辨率应用不同的 CSS 样式。比如在电脑、Pad 设备上,屏幕比较宽,就可以一行放 2 个 Div。
到了手机上,或者 Pad 竖着拿的的时候,一行就只放 1 个 Div。
这里有 2 个关键点:
一是如何在不修改 Dom 结构的前提下调整布局。
二是如何判断屏幕分辨率并应用对应的 CSS。
以上两点都应该不依赖与 JS。

原文:http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

作者:Addy Osmani

译者按:在突如其来的移动热潮下,web 开发者似乎回到了早期兼容或 hack 各种浏览器的暗黑时代。唯一不同的是,现在不是兼容浏览器而是兼容设备,这比起在同一台 PC 上兼容不同浏览器要痛苦得多,另外由于终端尺寸的差异,涉及的兼容性问题会显得更加复杂。因此,跨终端的同步化测试工具是急切需要的,这意味着工作效率的成倍提升!感谢 Addy 大神的文章,给出了这个领域的多个选择,希望对大家有所帮助,遇到问题可以微博交流(@碧青_Kwok)~最后,与往常一样,转载请注明出处: )

====索引=====

【Web 缓存机制系列】1 – Web 缓存的作用与类型

【Web 缓存机制系列】2 – Web 浏览器的缓存机制 

【Web 缓存机制系列】3 – 如何构建可缓存站点

【Web 缓存机制系列】4 – HTML5 时代的 Web 缓存机制

【Web 缓存机制系列】5 – Web App 时代的缓存机制新思路

【Web 缓存机制系列】6 - 进击的 Hybrid App,量身定做缓存机制

============

前言

前面的文章分别简述了 Web 缓存、相关机制、以及 html5 和 Web App 时代我们可以选择的缓存思路。转眼过了很长时间,这期间移动互联网成为大家讨论和学习的焦点,部门也有很多同学陆续接触 Mobile Native App 和 Mobile Web App 的开发。同时,还有部分同学专注 QQ 内嵌 Webkit + Client 这种 Hybrid App 模式的开发,继续推动 QQ 客户端 Web 化的进程。

引用张图,简单粗俗的解释下 Native App、Web App 和 Hybrid App

什么是 Qing?Qing 是一套基础开发模版,来源于我们在手机与 PC 端上的大量工程实践。Qing 所提供不是冷冰冰的文件,
而是一套 Web 前端解决方案,所以 Qing 不只是关注项目的初始状态,而是整体的工作流程,
这是 Qing 与现有开源的开发模版显著差异的一点。Qing 的体验必须是高效且愉悦的,拒绝繁琐与重复。
其足够的 Qing 量,只需 30 分钟内即可掌握最先进的 Web 开发技能。以下是 Qing 所基于的开发理念:

  1. 移动端优先,兼容 PC 端
  2. 向前看齐,基于 ES5 开发
  3. 模块化 Web 开发过程
  4. 自动构建与部署集成, 基于 Mod.js 工具

基于未来趋势的开发理念,Qing 旨在提供工程化方案。

平台与浏览器版本兼容:

  • iOS 4.0+
  • Android 2.2+
  • IE 6+
  • Chrome
  • Firefox
  • Safari