CSSレスポンシブ max-width を複数指定する時。

Question

画面幅1024px以上ではpadding: 16px 20px
画面幅1023px以下から768pxまではpadding: 8px 12px
画面幅767pxから以下は padding: 16px 20px
というデザインを実現したいのです。

                .link_btn{
                    background-color: #ffe700;
                    text-align: center;
                    padding: 16px 20px;
                    display: inline-block;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    border: 1px solid #ffe700;
                    @media screen and(max-width: 1023px){
                        padding: 8px 12px;
                    }
                    @media screen and(max-width: 767px){
                        padding: 16px 20px;
                    }

上記コードをでは画面幅767px以下でも

                    @media screen and(max-width: 767px){
                        padding: 16px 20px;
                    }

が適用されず、

                    @media screen and(max-width: 1023px){
                        padding: 8px 12px;
                    }

が適用されています。

どのような書き方をすれば、

画面幅1024px以上ではpadding: 16px 20px
画面幅1023px以下から768pxまではpadding: 8px 12px
画面幅767pxから以下は padding: 16px 20px

というデザインが実現できるでしょうか?

Answer 1

こういう風に書くかなぁ。
この範囲だけpaddingを小さくしたいみたいだし。

@media (min-width: 768px) and (max-width: 1023px) {
　　padding: 8px 12px;
}

Comments

[Fukusuke0604]

この範囲だけpaddingを小さくしたい という考えで andを使って表せれるんですね。ありがとうございます。