{"id":13717472,"url":"https://github.com/ufologist/responsive-page","last_synced_at":"2025-04-12T16:31:06.721Z","repository":{"id":136687007,"uuid":"39187947","full_name":"ufologist/responsive-page","owner":"ufologist","description":"让你的页面轻松适配各种移动设备和PC端浏览器","archived":false,"fork":false,"pushed_at":"2019-07-06T08:22:39.000Z","size":2201,"stargazers_count":147,"open_issues_count":1,"forks_count":40,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-26T10:52:19.890Z","etag":null,"topics":["mobile"],"latest_commit_sha":null,"homepage":"http://ufologist.github.io/responsive-page","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ufologist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-07-16T09:16:37.000Z","updated_at":"2024-11-25T11:51:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"8ff80875-c241-4f64-b001-074f19cef061","html_url":"https://github.com/ufologist/responsive-page","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ufologist%2Fresponsive-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ufologist%2Fresponsive-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ufologist%2Fresponsive-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ufologist%2Fresponsive-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ufologist","download_url":"https://codeload.github.com/ufologist/responsive-page/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248596429,"owners_count":21130700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mobile"],"created_at":"2024-08-03T00:01:22.785Z","updated_at":"2025-04-12T16:31:06.697Z","avatar_url":"https://github.com/ufologist.png","language":"JavaScript","readme":"# ![icon](http://ufologist.github.io/responsive-page/icon.png) responsive-page\nv1.0.0 2015-7-16 by Sun\n\n让你的页面轻松适配各种移动设备和桌面端(PC)浏览器, 1.46 KB only! 无任何其他依赖.\n\n* 非常适合专题着陆页(landing page)\n* 页面内容一般为几张图片拼接而成\n* 需同时适配移动端和桌面端\n* 需自适应宽度\n* (绝对)定位元素仅需使用 px 单位即可适配\n* 仅需按照 640px(可配置) 宽的设计稿来切图\n* 即使内容很长, 换行也需要正确\n\n![演示 responsive-page 适配功能](http://ufologist.github.io/responsive-page/responsive-page.gif)\n\n## 基础原理\n计算出页面内容与页面宽度的比率, 通过 transform: scale 缩放页面内容来达到适配任何屏幕(占满屏幕宽度)的目的.\n\n## 兼容性\n特性: querySelectorAll, CSS3 transform, matchMedia\n*   PC端: IE9+, 其他现代浏览器(chrome, firefox等等)\n* 移动端: iOS4+, Android 2.3+\n\n## 示例\n* [jd.html](http://ufologist.github.io/responsive-page/demo/jd.html) 页面中包含多个需要适配的模块\n* [70c.html](http://ufologist.github.io/responsive-page/demo/70c.html) 页面仅包含一个需要适配的模块和绝对定位的可点击区域, 并开启 center 模式来适配PC端\n\n页面宽度超过切图宽度后, 不再适配页面宽度, 而是居中显示在页面中\n\n![演示 responsive-page center 模式](http://ufologist.github.io/responsive-page/responsive-page-center.png)\n\n## 使用手册\n最好的使用手册就是示例, [下载/引入JS](https://github.com/ufologist/responsive-page/raw/master/responsive-page.min.js), 执行JS, 坐等适配结果\n\n## API文档\n```javascript\nresponsivePage({\n    selector: '.mod-responsive', // string 内容区域的父级元素, 接受任何合法的CSS选择器\n    sliceWidth: 640,             // number 切图宽度(单位是px), 即设计稿宽度\n    center: true                 // boolean 页面宽度超过切图宽度后, 是否不再适配宽度居中显示在页面中\n});\n```\n\n## 感谢他们给我的灵感\n* [pageResponse](https://github.com/peunzhang/pageResponse)\n* [JD的页面](http://sale.jd.com/m/act/LZkDEwunm53ilyrR.html) 已经下线了...\n\n如果有任何bug或者问题, 请发个 [issue](https://github.com/ufologist/responsive-page/issues) 给项目, 非常感谢.\n\n## 其他适配方案\n* [百分比](http://ufologist.github.io/responsive-page/others-responsive/70c-percent.html)\n\n    只用CSS就能够适配屏幕, 比较适合多图片拼接的页面. 由于需要适配屏幕, 因此绝对定位元素的位置, 宽, 高都需要使用百分比来设置, 在布局时我们需要手工将原来的 px 值计算成百分比(特别是 top 难以计算), 让人心好累.\n\n    **对于混合大段文字内容时就会出现适配不了的问题, 可能就需要你通过JS来动态设置文字的大小和行高了.**\n* [initial-scale](http://ufologist.github.io/responsive-page/others-responsive/70c-initial-scale.html)\n\n    用非常简单的JS就能够实现和 responsive-page 一样的适配效果, **但对于混合大段文字内容时就会出现适配不了的问题(这个很可能是移动端浏览器的BUG造成的, 通过chrome模拟时没有这个问题)**\n* [rem](http://ufologist.github.io/responsive-page/others-responsive/70c-rem.html) | [flexible](http://ufologist.github.io/responsive-page/others-responsive/flexible.html)\n\n    与\"百分比\"的解决方案类似, 只不过这里使用的是 rem 单位, 使用此方案时所有元素的尺寸单位和位置单位都需要使用 rem, 才能确保适配屏幕时元素的尺寸能够自由适配, 相对于百分比值的计算, 计算出元素的 rem 值要方便多了.\n\n    此方案也需要借助 JS 来实现适配的逻辑, 主要是根据屏幕宽度比来修改 root(html) font-size, 以达到适配任何屏幕的目的. 可以参考[web app变革之rem](http://isux.tencent.com/web-app-rem.html)和[阿里无线前端可伸缩布局方案](https://github.com/amfe/lib-flexible)来详细了解下关于 rem 和适配.\n\n    **对于混合大段文字内容时也出现了一点点不适配的问题, 文字相对于原始布局出现了一些偏移, 其他方面都很好, 算是非常完满的适配方案了.**\n\n## 版本更新历史\n[CHANGLOG](CHANGLOG.md)\n\n## Licence\n[MIT](https://github.com/ufologist/responsive-page/blob/master/LICENSE)\n","funding_links":[],"categories":["JavaScript","5. 基础模版"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fufologist%2Fresponsive-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fufologist%2Fresponsive-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fufologist%2Fresponsive-page/lists"}