Tailwind CSS - 尺寸

上一頁
下一頁

Tailwind CSS 尺寸是一個實用程式類，提供了一種有效處理內容高度和寬度的方法。它用於設定高度和寬度或操作它們。

Tailwind CSS 尺寸類

以下是提供有效處理內容高度和寬度方法的Tailwind CSS 尺寸類列表。

類名 CSS 屬性
size-0 width: 0px;
height: 0px;
size-px width: 1px;
height: 1px;
size-0.5 width: 0.125rem; /* 2px */
height: 0.125rem; /* 2px */
size-1 width: 0.25rem; /* 4px */
height: 0.25rem; /* 4px */
size-1.5 width: 0.375rem; /* 6px */
height: 0.375rem; /* 6px */
size-2 width: 0.5rem; /* 8px */
height: 0.5rem; /* 8px */
size-2.5 width: 0.625rem; /* 10px */
height: 0.625rem; /* 10px */
size-3 width: 0.75rem; /* 12px */
height: 0.75rem; /* 12px */
size-3.5 width: 0.875rem; /* 14px */
height: 0.875rem; /* 14px */
size-4 width: 1rem; /* 16px */
height: 1rem; /* 16px */
size-5 width: 1.25rem; /* 20px */
height: 1.25rem; /* 20px */
size-6 width: 1.5rem; /* 24px */
height: 1.5rem; /* 24px */
size-7 width: 1.75rem; /* 28px */
height: 1.75rem; /* 28px */
size-8 width: 2rem; /* 32px */
height: 2rem; /* 32px */
size-9 width: 2.25rem; /* 36px */
height: 2.25rem; /* 36px */
size-10 width: 2.5rem; /* 40px */
height: 2.5rem; /* 40px */
size-11 width: 2.75rem; /* 44px */
height: 2.75rem; /* 44px */
size-12 width: 3rem; /* 48px */
height: 3rem; /* 48px */
size-14 width: 3.5rem; /* 56px */
height: 3.5rem; /* 56px */
size-16 width: 4rem; /* 64px */
height: 4rem; /* 64px */
size-20 width: 5rem; /* 80px */
height: 5rem; /* 80px */
size-24 width: 6rem; /* 96px */
height: 6rem; /* 96px */
size-28 width: 7rem; /* 112px */
height: 7rem; /* 112px */
size-32 width: 8rem; /* 128px */
height: 8rem; /* 128px */
size-36 width: 9rem; /* 144px */
height: 9rem; /* 144px */
size-40 width: 10rem; /* 160px */
height: 10rem; /* 160px */
size-44 寬度：11rem；/* 176px */
高度：11rem；/* 176px */
size-48 寬度：12rem；/* 192px */
高度：12rem；/* 192px */
size-52 寬度：13rem；/* 208px */
高度：13rem；/* 208px */
size-56 寬度：14rem；/* 224px */
高度：14rem；/* 224px */
size-60 寬度：15rem；/* 240px */
高度：15rem；/* 240px */
size-64 寬度：16rem；/* 256px */
高度：16rem；/* 256px */
size-72 寬度：18rem；/* 288px */
高度：18rem；/* 288px */
size-80 寬度：20rem；/* 320px */
高度：20rem；/* 320px */
size-96 寬度：24rem；/* 384px */
高度：24rem；/* 384px */
size-auto 寬度：auto;
高度：auto;
size-1/2 寬度：50%;
高度：50%;
size-1/3 寬度：33.333333%;
高度：33.333333%;
size-2/3 寬度：66.666667%;
高度：66.666667%;
size-1/4 寬度：25%;
高度：25%;
size-2/4 寬度：50%;
高度：50%;
size-3/4 寬度：75%;
高度：75%;
size-1/5 寬度：20%;
高度：20%;
size-2/5 寬度：40%;
高度：40%;
size-3/5 寬度：60%;
高度：60%;
size-4/5 寬度：80%;
高度：80%;
size-1/6 寬度：16.666667%;
高度：16.666667%;
size-2/6 寬度：33.333333%;
高度：33.333333%;
size-3/6 寬度：50%;
高度：50%;
size-4/6 寬度：66.666667%;
高度：66.666667%;
size-5/6 寬度：83.333333%;
高度：83.333333%;
size-1/12 寬度：8.333333%;
高度：8.333333%;
size-2/12 寬度：16.666667%;
高度：16.666667%;
size-3/12 寬度：25%;
高度：25%;
size-4/12 寬度：33.333333%;
高度：33.333333%;
size-5/12 寬度：41.666667%;
高度：41.666667%;
size-6/12 寬度：50%;
高度：50%;
size-7/12 寬度：58.333333%;
高度：58.333333%;
size-8/12 寬度：66.666667%;
高度：66.666667%;
size-9/12 寬度：75%;
高度：75%;
size-10/12 寬度：83.333333%;
高度：83.333333%;
size-11/12 寬度：91.666667%;
高度：91.666667%;
size-full 寬度：100%;
高度：100%;
size-min 寬度：min-content;
高度：min-content;
size-max 寬度：max-content;
高度：max-content;
size-fit 寬度：fit-content;
高度：fit-content;

Tailwind CSS 尺寸類功能

  • size-*： 這指定了高度和寬度，並可以設定特定長度。* 可以替換為表格中提到的任何可接受的值。
  • min-px： 這將高度和寬度指定為 1px 值。
  • size-auto： 這指定高度和寬度根據內容設定。
  • size-1/2： 這指定高度和寬度設定為視窗的一半。
  • size-1/3： 這指定高度和寬度設定為視窗的三分之一。
  • size-1/4： 這指定高度和寬度設定為視窗的四分之一。
  • size-1/5： 這指定高度和寬度設定為視窗的五分之一。
  • size-1/6： 這指定高度和寬度設定為視窗的六分之一。
  • size-1/12： 這指定高度和寬度設定為視窗的十二分之一。
  • size-full： 這指定高度和寬度設定為全屏。
  • size-min： 此類用於指定最小高度和最小寬度。
  • size-max： 此類用於指定最大高度和最大寬度。
  • size-fit： 此類將高度和寬度設定為適合父容器的內容。

Tailwind CSS 尺寸類示例

以下示例將說明 Tailwind CSS 尺寸類實用程式。

定義固定尺寸

要定義固定尺寸，我們可以使用諸如`size-px`、`size-1` 和 `size-24`之類的類。可以從上表中使用任何有效的數值（w-*）來同時建立固定高度和寬度。

示例

在此示例中，我們將建立五個元素，並在每個元素上設定不同的固定尺寸類。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Size Class
    </h2>
    <div class="flex text-center space-x-1 bg-green-100 p-4">
        <div class="size-16 bg-green-400 
                    rounded-lg">size-16</div>
        <div class="size-20 bg-green-400 
                    rounded-lg">size-20</div>
        <div class="size-24 bg-green-400 
                    rounded-lg">size-24</div>
        <div class="size-32 bg-green-400 
                    rounded-lg">size-32</div>
        <div class="size-40 bg-green-400 
                    rounded-lg">size-40</div>
    </div>

</body>

</html>

定義百分比尺寸

有時在任何元素上設定百分比值是有益的，因為它將根據視窗大小調整高度和寬度。

示例

在此示例中，我們將使用一些完全依賴於視窗大小的類。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Size Class
    </h2>
    <div class="text-center size-full 
                space-y-1 bg-green-100 p-4">
        <div class="size-1/2 bg-green-400 
                    rounded-lg">size-1/2</div>
        <div class="size-1/3 bg-green-400 
                    rounded-lg">size-1/3</div>
        <div class="size-1/4 bg-green-400 
                    rounded-lg">size-1/4</div>
        <div class="size-1/5 bg-green-400 
                    rounded-lg">size-1/5</div>
        <div class="size-1/6 bg-green-400 
                    rounded-lg">size-1/6</div>
        <div class="size-full bg-green-400
                    rounded-lg">size-1/12</div>
    </div>
</body>

</html>

重置元素尺寸

有時我們需要根據螢幕大小重置元素的尺寸。假設我們希望在視窗大小為中等時重置尺寸，我們可以簡單地在中等螢幕上使用 `size-auto`。

示例

在此示例中，當螢幕尺寸為中等時，我們將元素上的指定尺寸重置為 auto。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Size Class
    </h2>
        <div class="size-4/6 md:size-auto 
                    bg-green-400 rounded-lg p-2">
            When the screen size will be medium 
            then size of this element will be 
            auto adjusted based on the content.
        </div>
        <br>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.