响应式侧边栏顺风 css

Question

长期以来，我一直在努力使用 tailwindcss 制作响应式侧边栏。目前看起来像 this

它在 1920x1080 屏幕上看起来不错，但在更大或更小的屏幕上却不行。 当我将它缩小时，文字彼此靠得太近而且看起来不太好 image

我希望它在分辨率较小时隐藏侧边栏，而不是侧边栏，会有一个按钮可以打开侧边栏，当我放大（使用 ctrl + 加号）侧边栏时 (zoomed in)

我的html当前代码

<div class="scale-90">
  <div class="flex flex-wrap w-full h-screen">
    <div class="xs:w-3/12 xs:h-128 w-3/12 visible xm:invisible bg-gradient-to-tr rounded-3xl from-black  via-gray-900 to-black p-3 shadow-lg ">
    <div class="h-screen sticky top-0">
        <div class="flex space-x-4 p-2 mt-4 mb-8 justify-center ">
            <img class="h-20 align-middle" src="src/assets/fx-culture.png" alt="James Bhatta">
        </div>
         <div class="mr-32">
        <div class="flex justify-center mr-16">
          <img class="h-12 align-middle rounded-full" src="src/assets/logo1.png">

        </div>
        <ul class="space-y-10 text-sm">
            <li>
              <a class="flex items-center mr-16 space-x-3 justify-center text-gray-500 text-xl p-2 font-medium">
                <span>Hello</span>
              </a>
              <a class="flex items-center ml-5 mb-20 space-x-3 justify-center text-white text-xl p-2 font-medium">
                <span>Kristian Kotlar</span>
              </a>
            </li>
            <li>
                <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 text-2xl p-2 font-medium hover:text-white focus:shadow-outline">
                    <span>My profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center ml-10 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Subscriptions</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center space-x-3 justify-center text-white transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Academy</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Calendar</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center mt-32 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Settings</span>
                </a>
            </li>
            <li>
                <a href="" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                    <span>Sign Out</span>
                </a>
            </li>
          
        </ul>
        </div>
    </div>
    </div>

    <div class="xs:w-8/12 w-8/12 xs:ml-20 xm:12/12 bg-white rounded-3xl">
        <div class="grid place-items-center min-h-screen">
    <div class="p-4 justify-items-center xs:justify-items-start max-w-5xl grid gap-x-24 gap-y-8  xs:gap-y-12 xs:gap-x-128 xs:grid-cols-3 xs:p-1 ">
      <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Webinars</h1>
      <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
          <img src="src/assets/logo.png" class="mx-auto">
          <h1 class="text-3xl font-extralight text-gray-500 text-center">
            <span class="">Beginners</span>
          </h1>
      </div>
      <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
        <img src="src/assets/logo.png" class="mx-auto">
          <h1 class="text-3xl font-extralight text-gray-500 text-center">
            <span class="">Advanced</span>
          </h1>
      </div>
      <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
        <img src="src/assets/logo.png" class="mx-auto">
          <h1 class="text-3xl font-extralight text-gray-500 text-center">
            <span class="">Professional</span>
          </h1>
      </div>
       <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Academy</h1>
      <div class="h-96 w-256  overflow-auto inline-block ">
        <table class="min-w-full">
                <tbody>
                    <tr class="bg-gray-200">
                        <td class="p-3 px-6 py-4 text-gray-700">
                            asdasdasdasdasd
                        </td>
                        <td class="px-6 text-gray-700">
                            1:27:21
                        </td>
                    </tr>
          <tr class="pt-8">
                        <td class="px-6 py-4 text-gray-700">
                            asdasdasdasdasdsssssssssssss
                        </td>
                        <td class="px-6 text-gray-700">
                            0:19:21
                        </td>
                    </tr>
            <tr class="bg-gray-200">
                        <td class="p-3 px-6 py-4 text-gray-700">
                            asdasdasdasdasd
                        </td>
                        <td class="px-6 text-gray-700">
                            0:20:21
                        </td>
                    </tr>
           <tr class="pt-8">
                        <td class="px-6 py-4 text-gray-700">
                            asdasdasdasdasdsssssssssssss
                        </td>
                        <td class="px-6 text-gray-700">
                            1:13:37
                        </td>
          </tr>
            <tr class="bg-gray-200">
                        <td class="p-3 px-6 py-4 text-gray-700">
                            asdasdasdasdasd
                        </td>
                        <td class="px-6 text-gray-700">
                            0:55:01
                        </td>
          </tr>
                   <tr class="pt-8">
                        <td class="px-6 py-4 text-gray-700">
                            asdasdasdasdasdsssssssssssss
                        </td>
                        <td class="px-6 text-gray-700">
                            1:13:37
                        </td>
          </tr>
          
            <tr class="bg-gray-200">
                        <td class="p-3 px-6 py-4 text-gray-700">
                            asdasdasdasdasd
                        </td>
                        <td class="px-6 text-gray-700">
                            0:55:01
                        </td>
          </tr>
                </tbody>
            </table>
      </div>
      <div class="h-96 w-256 xs:ml-36 bg-gray-100 rounded-xl">
          
      </div>
    </div>

  </div>
    </div>
</div>
</div>

和我的 tailwind.config.js 文件

const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    
    extend: {
      width: {
        '256': '30rem',
      },
      height: { 
        '128': '61rem',
      },
    },
    screens: {
      xs: "1390px",
      md: "1040px",
      xdd: "1000px",
      ...defaultTheme.screens,
    }
  
  },
  plugins: [],
}

Answer 1

要在小屏幕上隐藏边栏，您只需默认隐藏边栏即可，在大屏幕上您会显示它。 You can read more about it on Tailwind documentation

同时添加一个切换图标，该图标将在较小的屏幕上显示并在较大的屏幕上隐藏，最后您可以添加 Javascript 以在较小的屏幕上显示隐藏的边栏。

我在 codepen 上快速实现了这个（尽管没有 Javascript 切换功能），请随意复制代码并添加您的 javascript 切换功能。

Check it on Codepen

<script src="https://cdn.tailwindcss.com"></script>

<div class="scale-90">
  <button aria-expanded="true" aria-controls="sidebar" class="lg:hidden text-gray-600 hover:text-gray-900 cursor-pointer rounded">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                  </svg>
                  <svg class="w-6 h-6 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
   </svg>
 </button>
  <div class="flex flex-wrap w-full h-screen">

    <div class="hidden lg:block xs:w-3/12 xs:h-128 w-3/12 visible xm:invisible bg-gradient-to-tr rounded-3xl from-black  via-gray-900 to-black p-3 shadow-lg ">

      <div class="h-screen sticky top-0">
        <div class="flex space-x-4 p-2 mt-4 mb-8 justify-center ">

          <img class="h-20 align-middle" src="src/assets/fx-culture.png" alt="James Bhatta">
        </div>
        <div class="mr-32">
          <div class="flex justify-center mr-16">
            <img class="h-12 align-middle rounded-full" src="src/assets/logo1.png">

          </div>
          <ul class="space-y-10 text-sm">
            <li>
              <a class="flex items-center mr-16 space-x-3 justify-center text-gray-500 text-xl p-2 font-medium">
                <span>Hello</span>
              </a>
              <a class="flex items-center ml-5 mb-20 space-x-3 justify-center text-white text-xl p-2 font-medium">
                <span>Kristian Kotlar</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 text-2xl p-2 font-medium hover:text-white focus:shadow-outline">
                <span>My profile</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center ml-10 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                <span>Subscriptions</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 justify-center text-white transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                <span>Academy</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                <span>Calendar</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center mt-32 space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                <span>Settings</span>
              </a>
            </li>
            <li>
              <a href="" class="flex items-center space-x-3 justify-center text-gray-500 transition ease-in-out delay-50 p-2 text-2xl font-medium hover:text-white focus:shadow-outline">
                <span>Sign Out</span>
              </a>
            </li>

          </ul>
        </div>
      </div>
    </div>

    <div class="xs:w-8/12 w-8/12 xs:ml-20 xm:12/12 bg-white rounded-3xl">
      <div class="grid place-items-center min-h-screen">
        <div class="p-4 justify-items-center xs:justify-items-start max-w-5xl grid gap-x-24 gap-y-8  xs:gap-y-12 xs:gap-x-128 xs:grid-cols-3 xs:p-1 ">
          <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Webinars</h1>
          <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
            <img src="src/assets/logo.png" class="mx-auto">
            <h1 class="text-3xl font-extralight text-gray-500 text-center">
              <span class="">Beginners</span>
            </h1>
          </div>
          <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
            <img src="src/assets/logo.png" class="mx-auto">
            <h1 class="text-3xl font-extralight text-gray-500 text-center">
              <span class="">Advanced</span>
            </h1>
          </div>
          <div class="h-64 w-64 bg-gray-100 xs:h-auto xs:square rounded-xl">
            <img src="src/assets/logo.png" class="mx-auto">
            <h1 class="text-3xl font-extralight text-gray-500 text-center">
              <span class="">Professional</span>
            </h1>
          </div>
          <h1 class="text-4xl font-extrathick xs:col-span-3 xs:grid xs:gap-4 xs:grid-cols-3">Academy</h1>
          <div class="h-96 w-256  overflow-auto inline-block ">
            <table class="min-w-full">
              <tbody>
                <tr class="bg-gray-200">
                  <td class="p-3 px-6 py-4 text-gray-700">
                    asdasdasdasdasd
                  </td>
                  <td class="px-6 text-gray-700">
                    1:27:21
                  </td>
                </tr>
                <tr class="pt-8">
                  <td class="px-6 py-4 text-gray-700">
                    asdasdasdasdasdsssssssssssss
                  </td>
                  <td class="px-6 text-gray-700">
                    0:19:21
                  </td>
                </tr>
                <tr class="bg-gray-200">
                  <td class="p-3 px-6 py-4 text-gray-700">
                    asdasdasdasdasd
                  </td>
                  <td class="px-6 text-gray-700">
                    0:20:21
                  </td>
                </tr>
                <tr class="pt-8">
                  <td class="px-6 py-4 text-gray-700">
                    asdasdasdasdasdsssssssssssss
                  </td>
                  <td class="px-6 text-gray-700">
                    1:13:37
                  </td>
                </tr>
                <tr class="bg-gray-200">
                  <td class="p-3 px-6 py-4 text-gray-700">
                    asdasdasdasdasd
                  </td>
                  <td class="px-6 text-gray-700">
                    0:55:01
                  </td>
                </tr>
                <tr class="pt-8">
                  <td class="px-6 py-4 text-gray-700">
                    asdasdasdasdasdsssssssssssss
                  </td>
                  <td class="px-6 text-gray-700">
                    1:13:37
                  </td>
                </tr>

                <tr class="bg-gray-200">
                  <td class="p-3 px-6 py-4 text-gray-700">
                    asdasdasdasdasd
                  </td>
                  <td class="px-6 text-gray-700">
                    0:55:01
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="h-96 w-256 xs:ml-36 bg-gray-100 rounded-xl">

          </div>
        </div>

      </div>
    </div>
  </div>
</div>