多终端解决方案 学习了

流行概念

• 响应式 Web Responsive Design: 利用 mediaquires 实现网页在多个终端设备下的适配。（ Start big and then reduce. ）

• 移动优先 Mobile First Design: 通过移动优先的原则，先做手机端的版本，再扩展到 pc 端。（ Start small and then add. ）

• 响应式设计 是一种较为成熟的多终端解决方案，它不等于多终端！

• 响应式 和 移动优先 不是对立的，而是互补的！
• 在这里，我们会梳理在各种场景下如何有效的利用响应式设计、移动优先设计以及其它方案来解决多终端适配的问题。

解决方案

响应式布局

响应式布局都有哪些？我该如何选择合适的响应式布局应用到我的产品呢？

• 液体或流体（Fluid layout）：主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。

  • 优点：页面内容不会丢失，只是呈现发生了变化；
  • 缺点：浏览器兼容性问题较多，对于大部分页面设计来说并不友好；
  • 应用：(http://www.smashingmagazine.com/)

• 混合布局（Mixed layout）（固态+液态）：较大外部模块使用fixed width,内部细节使用fluid width;

  • 优点：media Queries代码量不会像屎一样，扩展及延伸效果更好，并且设计不会受太大的局限；
  • 应用：DPL 系统响应式设计方案（v130507） 我的淘宝 (http://www.awwwards.com/)

• 临界值设定：

  • 根据页面内容：比较灵活，同时不会受设备的宽度分布影响。

/* 大屏幕 */ @media only screen and (min- 1000px) and (max-1200) { … }

/* 平板电脑横向及竖向分辨率 */ @media only screen and (min- 700) and (max- 999px) { … }

/* 横向放置大屏手机分辨率 */ @media only screen and (min- 500px) and (max- 699px) { … }

/* 小屏手机横向竖向及大屏手机竖向分辨率 */ @media only screen and (min- 300px) and (max-499px) { … }

• 根据设备宽度：设备类型、宽度较多，不确定因素很多，每增一种设备就需要添加一种临界值。

/* 大屏幕 */ @media only screen and (min- 1025px) and (max-1280) { … }

/* 平板电脑和小屏电脑之间的分辨率 */ @media only screen and (min- 769px) and (max- 1024px) { … }

/* 横向放置大屏手机和竖向放置的平板之间的分辨率 */ @media only screen and (min- 481px) and (max- 768px) { … }

/* 横向放置的小屏手机及分辨率更小的设备 */ @media only screen and (max- 480px) { … }

/* 竖向放置的平板及以下设备的公用样式，如：需要左侧导航隐藏，push方式出现 */ @media only screen and (max- 768px) { … }

/* Retina屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { … }

• MT-layout：该框架基于 semantic 进行优化，底层基于 sass；

  • 优点：基于 sass，易于定制、扩展，生成多个终端版本；
  • 缺点：浏览器兼容问题较多；
  • 应用：我的淘宝

• Mqa : Mqa是一个简单媒体查询假名库, 是对浏览器原生的matchMedia做了一层简单的封装, 提供了更加方便简洁的事件接口以及媒体字符串的简写注册. 目前作为KISSY Gallery的一个组件存在, 当然, 您只需做简单的修改就可以独立于KISSY运行(毕竟, 只用到了KISSY的Loader -.-!).

图片适配

目前尚没有支持图片的矢量解决方案，那么在不同设备、高分辨率的屏幕上该如何解决图片的展示问题呢？

• CSS sprite + Media quires：将图片作为背景，通过 media quires 来定义在不同分辨率下使用什么样的背景图片。
  • 优点：使用简单；
  • 缺点：改变了正常图片的使用方式，局限性很大；
• Javascript：默认先加载标准图片，js 判断屏幕分辨率后决定是否加载高分辨率的图片。
  • 优点：不干扰原有的图片使用方式；
  • 缺点：标准图片和高分辨率图片都会下载。
• Icon Fonts：使用 CSS font-face 自定义字体来渲染单色图形（图标）。( etao 图标字体库 )
  • 优点：维护两组图片是非常痛苦的，icon fonts 可用于为页面添加单一色彩和可伸缩的矢量图形；
  • 缺点：应用场景有限，局限于 icon 和简单图形，需专门定制。
• cdn 处理：根据终端输出对应图片。
  • 优点：不需前端做啥事儿，统一解决所有业务问题；
  • 缺点：未知。。。

资源加载

当兼容的设备越来越多时，你的样式是否越来越大？当各终端的交互行为都针对性的定制时，你的脚本是否会越来越大？那么我们该如何解决各终端的资源加载问题呢？

• 客户端：这种方式需要一个统一的判断脚本，这段脚本预先加载到页面中，通过判断客户端UA（结合window.matchMedia）来决定是加载PC端的还是手机端的启动脚本
  • 优点：纯前端，不需要操心后台
  • 缺点：需要多一段判断脚本；脚本是动态引入的，浏览器的前进后退刷新操作会重新请求；控制权在客户端（个人不喜欢这种方式）
• 服务端：这种方式是在后端通过判断UA的方式去生成不同的html页面（差异主要表现在引入不同的启动脚本）
  • 优点：比较灵活，控制权在服务端（个人比较偏向这种方式）
  • 缺点：可能需要后端的配合，如果你对VM比较熟的话，可以直接使用BrowserTool工具类来进行客户端的解析

性能优化

移动端受自身硬件、网络的限制，比 pc 更需要性能的优化，那么除了传统桌面端的基本性能优化外，我们在移动端还需要做哪些事情呢？

• 与 pc assets 资源分离，在各个终端仅加载跟自己相关的 assets 资源；
• 减小图片大小，在移动端使用合适大小的图片；
• 适度使用缓存技术，减少资源重复下载；

调试/测试

都有哪些工具可以辅助我们进行更好的进行多终端开发和调试呢？

• 模拟器：
  • Mac xcode ios 模拟机器：mac 上的 ios 模拟器基本可以完整的模拟 iphone、ipad 设备，还可以通过 safari 进行调试；
• 响应式测试：
  • (http://responsivepx.com/)：输入要测试的网站后，可以简单即时调整页面宽度进行响应式测试；
  • (http://mattkersley.com/responsive/)：输入要测试的网站可以看到在多个分辨率下的展现；
• 远程调试：

	windows + ios	windows + android	mac + ios	mac + android
无线	MIHTOOL + Chrome + Fiddler/nproxy	Android SDK + Fiddler/nproxy	MIHTOOL + nproxy(强烈推荐此高富帅组合)
有线	(Android SDK +Chrome) + Fiddler/nproxy		(Safari + Safari) + nproxy

应用场景

• 新产品

  • Mobile First + 响应式设计：首先做移动端，再通过响应式适配多终端版本；

• 旧产品

  • 思路一：从手机端开始做起，通过手机端进行功能、模块的梳理，完成后再反过来影响其它终端；
    • 优点：每个终端都可以做的精细，由少至多也更容易做一点；
    • 缺点：思路的转变不易，过程相对来说可能会长一点。
  • 思路二：先兼容 pad，手机端仅作简单适配，使其可用；
    • 优点：不用投入过多的成本就可以满足基本的需求；
    • 缺点：各个终端都不能够有很好的体验；

如何开始

1. 无产品视觉投入，前端孤军奋战者！

   • 处境
     • 无产品支持，无交互视觉支持，囧啊！
   • 建议
   • 首先去拉交互视觉入伙，让他们在做设计时考虑到多终端的适配；
     • 成功：恭喜你，得到了视觉交互同伴的支持，你可以考虑去使用响应式来适配各种终端；
     • 失败：很遗憾，不过没关系，你同样可以考虑使用响应式来适配，但是可能走的艰难一点。
   • 先做 pad 端的适配，建议使用 响应式 来适配；
   • 做好 pad 端后，再去跟产品去谈，影响他们：
     • 成功：恭喜你，得到产品的支持意味着你可以做更多的事情，这时你可以要求视觉、交互更好的配合你，也可以更进一步去做手机端的适配；
     • 失败：很遗憾，不过没关系，你可以继续优化 pad 端的适配，然后根据自己的思考以及产品的特点去做手机端的适配，继续不断的去影响产品；

2. 有产品视觉投入，无比幸福者！

   • 处境
     • 幸福，无比的幸福！可以做好多事儿！
   • 建议
     • 如果是新产品，Mobile First！！
     • 如果是旧产品，可以从手机端开始，梳理产品自身的功能点、内容，做一个简版出来，之后再扩展内容反过来改版现有的桌面版；

原文地址:http://www.atatech.org/article/detail/8378/786?ticket=17c0b4ec-3eaa-4148-9c62-c40f16c7b08a