@0saw/foundation-media-query 中文文档教程

Question

Foundation Media Query

帮助您处理基础站点媒体查询的小巧实用工具。

没有依赖性。 除了粉底 (Da-a-ah)。 添加 CustomEvent polyfill。

Usage

import mq from "@0saw/foundation-media-query";

document.addEventListener('breakpoint-change', breakpointEventListener);

function breakpointEventListener() {
    if (mq.is('large only')) {
        console.log("You've hit the right spot");
    }
}

您没有义务将 mq 导入您的范围。 相反，您可以像这样使用 event.detail：

import "@0saw/foundation-media-query";

document.addEventListener('breakpoint-change', breakpointEventListener);

function breakpointEventListener(event) {
    let mq = event.detail;

    switch (mq.current) {
        case 'medium':
            alert("You've hit the right spot");
            break;
        case 'large':
            alert("Too far");
            break;
        default:
            break;
    }
}

API

mq 对象包含一些有用的东西。

Getters

• mq.current - Gives you the name of current breakpoint
• mq.currentFull - Gives you all of the breakpoint info that we have. (I.e mq.currentFull.matchMedia will give you matchMedia object. In case you want to do something naughty)
• mq.landscape - Analog of CSS's (orientation: landscape)
• mq.portrait - Pretty straight forward
• mq.retina - DPI is at least 2x

Methods

• mq.is - Allows you to quickly check current breakpoint

// Either true or false
mq.is('xlarge');

// Won't return true when next breakpoint is active. ([small -> medium] -> large)
mq.is('medium only');

// portrait/ladscape/retina
mq.is('portrait');

FAQ

• We obliviously need foundation to operate. But if you are using mixin version of foundation-sites - make sure to @include foundation-global-styles;