Response.js 技术文档

2024-12-24 06:26:13作者：邓越浪Henry

本文档将详细介绍如何安装和使用 Response.js，这是一个实验性的 jQuery、Ender 或 Zepto 插件，用于帮助网页设计师构建响应式网站。

1. 安装指南

使用 npm 安装

在命令行中运行以下命令以通过 npm 安装 Response.js：

npm install response.js

手动下载

你也可以从 Response.js GitHub 仓库手动下载最新版本的代码，并将其包含在你的项目中。

2. 项目的使用说明

Response.js 通过断点集（breakpoint sets）提供动态交换内容的能力。以下是如何使用该插件的步骤：

创建断点集

通过调用 Response.create(options) 方法或通过 JSON 存储在 body[data-responsejs] 中来自动创建断点集。

<body data-responsejs='{
  "create": [
    { "prop": "width", "prefix": "min-width-", "lazy": true, "breakpoints": [1281, 1025, 961, 641, 481, 320, 0] }
  ]}'
>

编写标记

使用数据属性编写标记，以便在不同的断点上显示不同的内容。

<div data-min-width-481="481px 以上的标记" data-min-width-961="961px 以上的标记">
  默认标记，480px 以下或无 JavaScript
</div>

3. 项目API使用文档

以下是 Response.js 的一些主要 API 方法：

断点集

Response.create(options)：创建一个新的断点集。
Response.addTest(prop, test)：定义一个自定义测试，用于检查断点。

方法

Response.viewportW()：返回 CSS 视口宽度。
Response.viewportH()：返回 CSS 视口高度。
Response.mq(mediaQuery)：检查媒体查询是否为真。
Response.inViewport(elem, cushion?)：检查元素是否在视口中。

设备尺寸

Response.deviceW()：返回设备宽度。
Response.deviceH()：返回设备高度。

设备像素比

Response.dpr([value])：返回设备像素比。

事件

Response.crossover(prop, fn)：在断点交叉时调用函数。
Response.ready(fn)：在文档就绪时调用函数。
Response.resize(fn)：在窗口大小改变时调用函数。

4. 项目安装方式

请参考上述的“安装指南”部分，了解如何通过 npm 或手动下载方式安装 Response.js。

本文档提供了 Response.js 的基本安装和使用说明，以及其 API 的简要概述。要获取更多详细信息，请参考项目在 GitHub 上的 Wiki 和 Issues。

response.js

Responsive design toolkit

项目地址：https://gitcode.com/gh_mirrors/re/response.js

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

leetcode

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

kernel

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

209

RuoYi-Vue3

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

无需学习 Kubernetes 的容器平台，在 Kubernetes 上构建、部署、组装和管理应用，无需 K8s 专业知识，全流程图形化管理

apinto

基于golang开发的网关。具有各种插件，可以自行扩展，即插即用。此外，它可以快速帮助企业管理API服务，提高API服务的稳定性和安全性。