目前很多APP設(shè)計(jì)師已經(jīng)開始在為h5做一些設(shè)計(jì)工作或者很多小伙伴也開始嘗試學(xué)習(xí)H5的知識啦。

那么要想一套視覺稿適配所有移動設(shè)備，肯定得想個(gè)辦法啊。除了用rem單位以外，還可以采用js來實(shí)現(xiàn)。

比如今天25學(xué)堂要分享的就是前端大神白樹的一個(gè)一套視覺稿適配所有移動設(shè)備的js框架：pageresponse。

移動端的適配效果如下：

PC端的適配效果如下：

鏈接地址：http://ol.weixin.qq.com/public/users/peunzhang/cashier/index.html

pageresponse.js算是移動端一款響應(yīng)式插件吧。

使用transform:scale縮放頁面，要求視覺稿高清

頁面以px為單位即可讓h5適配各種移動設(shè)備，適配原則根據(jù)視覺稿比例縮放頁面

告別rem、媒體查詢、百分比等相對復(fù)雜且定位不精準(zhǔn)的布局

兼容性良好，支持ios4+、android2.3+、winphone8+系統(tǒng)

約1k，零依賴

三種適配模式可選 auto || contain || cover

真實(shí)案例：超級收銀員

手機(jī)掃碼預(yù)覽：

github倉庫地址：https://github.com/peunzhang/pageResponse

更多關(guān)于一套視覺稿適配所有移動設(shè)備的js框架：pageresponse.js的詳細(xì)介紹和使用手冊可以閱讀白樹的博客。

作者白樹簡介：目前就職于騰訊微信支付設(shè)計(jì)中心，負(fù)責(zé)移動端產(chǎn)品，擅長html5、css3、javascript，熱愛前端構(gòu)建、模塊化開發(fā)。

原文地址：http://www.cnblogs.com/PeunZhang/p/4517864.html

另外，國外也有一款類似的jquery移動適配插件：Response JS?

Response JS 是一個(gè)輕量級的 jQuery 插件，用來創(chuàng)建高性能的支持移動設(shè)備的網(wǎng)站。它提供了一套語法用來根據(jù)不同的環(huán)境動態(tài)替換HTML代碼。例如根據(jù)屏幕大小，動態(tài)的替換img標(biāo)簽的src地址。

官網(wǎng)：http://responsejs.com/

?