css - Tailwind：外接显示器和笔记本电脑屏幕都被认为是 xl 但尺寸差异很大：使导航栏表现不同

Question

我有一台 15.6 英寸屏幕的笔记本电脑和一台 23 英寸屏幕的外接显示器。我有一个.vue包含此代码的组件：

<template>
  <div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
    Hello
  </div>
</template>

当我在笔记本电脑屏幕上查看它时，它会显示：

• 与屏幕尺寸相对应的teal颜色。xl

当我将它移到外接显示器时，它div具有相同的颜色。teal

然而，屏幕尺寸之间的差异是显着的。如果 15.5'' 和 23'' 都被认为是xl，如何获得更好的响应能力？

例如，我有一个包含多个导航栏项目的导航栏。当我在笔记本电脑屏幕上查看它时，我需要将填充px-2变小以使其全部适合：

但是在 23'' 屏幕上，我有空间添加更多填充/边距，但不能这样做，因为这些更改也会影响笔记本电脑的视图：

这是的代码NavbarItem.vue：

<template>
    <li class="flex-1 md:flex-none md:mr-3
                    sm:text-xs md:text-xs lg:text-xs xl:text-xs
                    border rounded-full">
        <a class="inline-block py-2 lg:px-5 xl:px-2
                    text-white no-underline" href="#">
            {{text}}
        </a>


    </li>
</template>

<script>
    export default {
        props: ['text']
    }
</script>

我尝试添加lg:px-5，但它不会影响任何东西，除非我删除xl:px-2. 当有 时xl:px-2，lg该类被忽略。

标签： cssresponsive-designscreen-sizetailwind-css

Answer 1

xl的最小宽度为1280px。检查断点。

您的 15.6" 和 23" 两个屏幕均低于 1280 像素。我建议添加额外的屏幕。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xxl': {'min': '1920px'}, // this is to support your 23". Make sure your 15.6" screen is less than the min px value passed here
    },
  }
}

然后你的class="inline-block py-2 lg:px-5 xl:px-2 xxl:px-4"

试试看，让我在下面的评论中发布。干杯!