README

摘要

定义响应式断点，可以触发JS回调；可选地将CSS类应用于指定元素。

此无依赖项目提供了一种定义窗口水平轴上的点的手段，即断点，当宽度跨越这些断点时可以触发JS回调。它提供了一个设置，可以将CSS类应用于指定元素。它提供了一个类似形式的PHP类，如果您使用CMS来协调断点，这可能很有用。

断点定义为水平轴上的一个单点。左侧是一个段，最高值断点右侧是射线。除了最高值断点之外的所有断点右侧都是一段。请参阅下面的 断点理论 部分。

访问 http://www.intheloftstudios.com/packages/js/breakpointx 查看完整文档。

安装

使用 yarn add @aklump/breakpointx 或 npm i @aklump/breakpointx 安装

使用Composer安装

需要此包

composer require aklump/breakpointx:^0.9

快速入门

var bp = new BreakpointX([480, 768]);

使用轴上的任何点获取段信息

bp.getSegment(200);
bp.getSegment(480);
bp.getSegment(1000);

命名段

命名您的段可能很有帮助

var obj = new BreakpointX([480, 768], ['small', 'medium', 'large']);

然后您也可以使用名称检索段信息，这包括宽度、从点、到点、媒体查询、图片宽度、名称等。

bp.getSegment(300);
bp.getSegment('small');

var name = bp.getSegment('small').name;
var query = bp.getSegment('small')['@media'];
var imageWidth = bp.getSegment(300).imageWidth;

CSS类

要使元素上写入CSS类，请传递适当的设置，其中 addClassesTo 是一个DOM对象。它成为实例的一个属性，作为 .el，因此可以在回调中访问（如果需要）。示例显示向 html 元素添加类。如果您使用jQuery，可以这样做 addClassesTo: $('html').get(0)。

// Breakpoints only with settings.
var obj = new BreakpointX([768], ['mobile', 'desktop'], {
  addClassesTo: document.documentElement,
  classPrefix: 'bpx-',
});

当浏览器变大并跨越768px时，元素将看起来像这样。

<html class="bpx-desktop bpx-bigger">

或者当跨越768px变小时。

<html class="bpx-mobile bpx-smaller">

当跨越断点时触发回调

当窗口宽度改变时，并且触发了断点或跨越了断点，可以注册回调作为结果。 this 指向 BreakpointX 实例。

// When the window crosses any breakpoint in either direction
bp.addCrossAction(function(segment, direction, breakpoint, previousSegment) {
  ... do something in response.
});

// When the window crosses 768 in either direction
bp.addBreakpointCrossAction(function(segment, direction, breakpoint, previousSegment) {
  ... do something in response.
});

// When the window crosses 768 getting smaller
bp.addBreakpointCrossSmallerAction(768, function (segment, direction, breakpoint, previousSegment) {
  ... do something in response.
});

// When the window crosses 768 getting bigger
bp.addBreakpointCrossBiggerAction(768, function (segment, direction, breakpoint, previousSegment) {
  ... do something in response.
});

从设备的角度来看

以下是一个示例，说明如何在考虑物理设备时构建实例。它是用PHP给出的，但是JS方法完全相同。

<?php
$obj = new BreakpointX();
$obj
  ->addDevice('iphone', 480)
  ->addDevice('ipad', 768)
  ->addDevice('desktop', 1024)
  ->renameSegment(0, 'small');

从媒体查询的角度来看

如果您有一系列代表段和射线的媒体查询，您也可以生成一个对象。查询不需要按任何特定顺序排列。

var obj = new BreakpointX();
obj
  .addSegmentByMedia('(max-width:768px)') // This is the ray.
  .addSegmentByMedia('(min-width:480px) and (max-width:767px)')
  .addSegmentByMedia('(max-width:479px)');

PHP用法

虽然这是一个JavaScript项目，但有一个PHP类可能对您的用例很有帮助。与浏览器相关的函数不存在，但其他方法与JS对象具有相同的API。类文件是 dist/BreakpointX.php 或如果使用Node安装，则 node_modules/@aklump/breakpointx/dist/BreakpointX.php。

<?php
$bp = new BreakpointX([480, 768]);

$name = $bp->getSegment(300)['name'];
$query = $bp->getSegment(300)['@media'];
$imageWidth = $bp->getSegment(300)['imageWidth'];

自动加载

对于PSR自动加载，命名空间 AKlump\\BreakpointX 应映射到 node_modules/@aklump/breakpointx/dist。以下是一个示例，用于同一目录中的 composer.json，用于安装BreakpointX。

{
    "autoload": {
        "psr-4": {
            "AKlump\\BreakpointX\\": "node_modules/@aklump/breakpointx/dist"
        }
    }
}

贡献

如果您发现这个项目很有用...请考虑捐赠。

断点理论

这份速查表将使您熟悉在此项目中使用的术语。

下载由 In the Loft Studios 提供的这份速查表

常见错误

按照定义，一个断点没有宽度，也没有最小或最大值；它只是一个点。
CSS 媒体查询表示一个段或射线，而不是断点。

aklump / breakpointx

维护者

详细信息