媒体查询列表解析器

已执行: https://www.w3.org/TR/medicqueries-5. 页面存档备份,存于互联网档案馆

使用量

添加 媒体查询列表解析器 对您的项目:

npm install @csstools/media-query-list-parser @csstools/css-parser-algorithms @csstools/css-tokenizer --save-dev

媒体查询列表解析器 取决于我们的 CSS 代码和解析算法. 必须同时使用 @csstools/css-tokenizer 财务报告和审定财务报表 @csstools/css-parser-algorithms。 。 。 .

import { parse } from '@csstools/media-query-list-parser';

export function parseCustomMedia() {
    const mediaQueryList = parse('screen and (min-width: 300px), (50px < height < 30vw)');

    mediaQueryList.forEach((mediaQuery) => {
        mediaQuery.walk((entry, index) => {
            // Index of the current Node in `parent`.
            console.log(index);
            // Type of `parent`.
            console.log(entry.parent.type);

            // Type of `node`
            {
                // Sometimes nodes can be arrays.
                if (Array.isArray(entry.node)) {
                    entry.node.forEach((item) => {
                        console.log(item.type);
                    });
                }

                if ('type' in entry.node) {
                    console.log(entry.node.type);
                }
            }

            // stringified version of the current node.
            console.log(entry.node.toString());

            // Return `false` to stop the walker.
            return false;
        });
    });
}