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

Posted 2023-03-07

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

【英文标题】：Tailwind: both external monitor and laptop screen are considered to be xl but big difference in size: make navbar behave differently

【发布时间】：2020-09-25 07:44:24

【问题描述】：

我有一台 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 类将被忽略。

【参考方案1】：

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

您的 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"

试一试，让我在下面的 cmets 中发布信息。干杯！