JavaScript 如何获取Tailwind CSS的活动断点

在JavaScript中，Tailwind CSS的活动断点是指当前活动的特定断点配置，在Tailwind CSS框架中允许Web设计师针对特定屏幕尺寸进行样式和功能上的考虑。在本文中，我们将看到如何在JavaScript中获取Tailwind的活动断点。

有两种常见的方法可以在JavaScript中获取Tailwind的活动断点，如下所示：

使用Tailwind CSS实用类
使用JavaScript和媒体查询

我们将探讨上述所有方法以及基本实现，并提供示例。

方法1：使用Tailwind CSS实用类

在此方法中，Tailwind CSS框架和JavaScript通过侦听窗口调整大小事件并根据视口宽度应用特定样式来动态显示活动断点和屏幕尺寸。

语法：

<div id="app" class="bg-red-200   
            sm:bg-blue-200   
            md:bg-green-200   
            lg:bg-yellow-200   
            xl:bg-pink-200   
            p-4">  
</div>

示例： 在这个示例中，我们使用了Tailwind CSS的工具类来针对屏幕大小或断点进行样式设置。使用JavaScript，我们动态地更新和显示活动断点和屏幕大小。JavaScript会监听窗口调整大小的事件，并更新基于媒体查询断点的显示的断点和屏幕大小。

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css"
        rel="stylesheet">
    <title>Tailwind CSS Breakpoint</title>
</head>
 
<body class="flex justify-center 
             items-center 
             min-h-screen 
             m-0">
    <div id="app" class="bg-red-200 
                sm:bg-blue-200 
                md:bg-green-200 
                lg:bg-yellow-200 
                xl:bg-pink-200 
                p-4">
        <p class="text-2xl">
            Active Breakpoint:
            <span id="breakpoint"
                class="font-semibold">
            </span>
        </p>
        <p class="text-lg">
            Screen Size:
            <span id="screenSize"
                class="font-semibold">
            </span>
        </p>
    </div>
 
    <script>
        function updatingActiveBreakpoint() {
            const breakpoints = {
                'xs': '(max-width: 639px)',
                'sm': '(min-width: 640px) and (max-width: 767px)',
                'md': '(min-width: 768px) and (max-width: 1023px)',
                'lg': '(min-width: 1024px) and (max-width: 1279px)',
                'xl': '(min-width: 1280px)',
            };
            let appElement = document.getElementById("app");
 
            for (const breakpoint in breakpoints) {
                if (window.matchMedia(breakpoints[breakpoint])
                .matches) {
                    document.getElementById("breakpoint"
                    ).textContent = breakpoint;
                    break;
                }
            }
 
            let screenSize = window.innerWidth + "px";
            document.getElementById("screenSize"
            ).textContent = screenSize;
        }
 
        window.addEventListener('resize',
            updatingActiveBreakpoint);
        updatingActiveBreakpoint();
    </script>
</body>
 
</html>

输出：
JavaScript 如何获取Tailwind CSS的活动断点

方法2：使用JavaScript和媒体查询

在这种方法中，我们使用JS和媒体查询来动态追踪活动的Tailwind CSS断点。JS使用媒体查询检查窗口的宽度与预定义的断点进行比较。

语法：

function getActiveBreakpoint() {
    if (window.matchMedia('(min-width: 1280px)').matches) {
        return 'xl';
    } else if (window.matchMedia('(min-width: 1024px)').matches) {
        return 'lg';
    } else if (window.matchMedia('(min-width: 768px)').matches) {
        return 'md';
    } else if (window.matchMedia('(min-width: 640px)').matches) {
        return 'sm';
    } else {
        return 'default';
    }
};

示例： 在这个示例中，我们使用了’window.matchMedia’来检查当前窗口的宽度与预定义断点相比较。

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Tailwind Active Breakpoint</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
        rel="stylesheet">
</head>
 
<body class="bg-gray-100">
    <div class="flex justify-center 
                items-center 
                h-screen">
        <div class="bg-green-800 
                    text-white 
                    p-6 
                    rounded-lg 
                    shadow-lg">
            <h1 class="text-2xl 
                       font-semibold 
                       mb-4">
                Active Tailwind Breakpoint:
            </h1>
            <div id="break-info"
                class="text-3xl font-bold">
            </div>
        </div>
    </div>
 
    <script>
        function getActiveBreakpoint() {
            if (window.matchMedia(
                '(min-width: 1280px)').matches) {
                return 'xl';
            } else if (window.matchMedia(
                '(min-width: 1024px)').matches) {
                return 'lg';
            } else if (window.matchMedia(
                '(min-width: 768px)').matches) {
                return 'md';
            } else if (window.matchMedia(
                '(min-width: 640px)').matches) {
                return 'sm';
            } else {
                return 'default';
            }
        }
 
        function updatingBreakInfo() {
            const breakInfo = 
                document.getElementById('break-info');
                 
            const activeBreakpoint = getActiveBreakpoint();
 
            if (activeBreakpoint) {
                breakInfo.textContent = activeBreakpoint;
            }
        }
 
        window.addEventListener('resize', updatingBreakInfo);
        updatingBreakInfo();
    </script>
</body>
 
</html>

输出：

JavaScript 如何获取Tailwind CSS的活动断点