Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                h1 說明如何讓長寬等比例隨著裝置尺寸變化

p keywords 
    span.keyword 等比例寬高縮放
    | ,
    span.keyword 寬高相等
    | ,
    span.keyword equal width height

h2.title-border 等比例縮放的容器搭配內容
h3 1. 利用 #[span.keyword width = padding-bottom]
p 利用 #[span.code padding-bottom] 可以製作等比例縮放的容器,關鍵在於 #[b 「當 padding-bottom 設定為百分比時,它會去抓該層空間的總寬度為分母。」]
pre
    code.language-css.
        .responsive-square {
            margin: 0 auto;
            background-color: $dark-blue;
            width: 35%;                 // 寬佔整個寬度的 35%
            padding-bottom: 35%;        // 高佔整個寬度的 35%
            position: relative;
            
            .content {
                color: white;
        
                // 將裡面的空間展開成和外面一樣
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;

                // 水平垂直置中內容
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
.responsive-square
    .content Hello
h3 2. 利用 #[span.keyword :before / :after]
pre
    code.language-css.
        .responsive-square-pseudo-element {
            margin: 0 auto;
            width: 35%;             // 決定要佔總寬度多少 %
            background-color: steelblue;
            position: relative;     // 用來協助定位內層元素

            &::after {
                content: "";
                display: block;
                padding-bottom: 100%;   // 一直都是 100%
            }

            .content {
                @include full-screen;
                @include vh-center;
                color: white;
            }
        }
.responsive-square-pseudo-element
    .content Hello

h2.title-border 等比例縮放的容器搭配圖片
h3 1. 利用 #[span.keyword max-width: 100%]
p 可以直接使用 #[span.code max-width: 100%] 的方式,該圖片就會等比例縮放
pre
    code.language-css.
        .responsive-max-width-100 {
            width: 30%;
            margin: 0 auto;
            background-color: #CCC;
            img {
                display: block;         /* ★★★★★ */
                max-width: 100%;        /* ★★★★★ */
            }
        }
    
.responsive-max-width-100
    img(src="https://api.fnkr.net/testimg/450x450/00CED1/FFF/?text=img+placeholder")


h3 2. 利用 #[span.keyword width = padding-bottom]
.responsive-square.circle
    .image-container 
        img(src="https://api.fnkr.net/testimg/600x600/00CED1/FFF/?text=img+placeholder", alt="")
        
              
            
!

CSS

              
                // 水平垂直置中
@mixin vh-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 將內層展開成和外層一樣大
@mixin full-screen {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

// 圓形
.circle {
    border-radius: 50%;
    overflow: hidden; // ★★★★★
}

.responsive-square {
    margin: 0 auto;
    background-color: steelblue;
    width: 35%; // 寬佔整個寬度的 35%
    padding-bottom: 35%; // 高佔整個寬度的 35%
    height: 0;
    position: relative; // 用來協助定位內層元素

    .content {
        color: white;

        // 將裡面的空間展開成和外面一樣
        @include full-screen;

        // 水平垂直置中內容
        @include vh-center;
    }

    .image-container {
        img {
            display: block; // ★★★★★
            width: 100%; // ★★★★★
            max-width: 100%; // ★★★★★
            margin: 0;
        }
    }
}

.responsive-square-pseudo-element {
    margin: 0 auto;
    width: 35%; // 決定要佔總寬度多少 %
    background-color: steelblue;
    position: relative; // 用來協助定位內層元素

    &::after {
        content: "";
        display: block;
        padding-bottom: 100%; // 一直都是 100%
    }

    .content {
        @include full-screen;
        @include vh-center;
        color: white;
    }
}

.responsive-max-width-100 {
    width: 35%;
    margin: 0 auto;
    background-color: #ccc;
    img {
        margin: 0;
        display: block; // ★★★★★
        width: 100%; // ★★★★★
        max-width: 100%; // ★★★★★
    }
}

              
            
!

JS

              
                
              
            
!
999px

Console