Skip to content

Instantly share code, notes, and snippets.

@yangjunjun
Last active August 29, 2015 13:57
Show Gist options
  • Save yangjunjun/9363517 to your computer and use it in GitHub Desktop.
Save yangjunjun/9363517 to your computer and use it in GitHub Desktop.
网站响应式改版方案

1. 综述

主要使用Foundation响应式框架来进行改版,目前根据公司网站的情况,把重点放在一下三个尺寸的设备以进行响应式优化(可以根据公司的访问情况来做进一步的优化):

  • 手机 (0 - 640px)
  • 平板 (640 - 1000)
  • 桌面 (>1000)

2. 改版内容

主要分为 响应式布局响应式内容(图片)

2.1 响应式布局

利用**Foundation*可以很容易实现弹性的栅格布局,以适应不同尺寸的设备。

具体方案

主要依靠Foundation来进行布局,修改相应的scss文件来符合公司网站的需求,必要时在Foundation的技术上编写适合自己的代码库。

2.2 响应式图片

带宽是手机终端的硬伤,如果我们只是页面布局做了响应式处理,在我们用手机访问时,请求的图片还是PC上的大图;文件体积大,消耗流量多,请求延时长,因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。

原理

浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰度。

具体方案:

  • 利用Foundation的interchange.

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">

3. Demo - 首页

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment