画面幅1024px以上ではpadding: 16px 20px
画面幅1023px以下から768pxまではpadding: 8px 12px
画面幅767pxから以下は padding: 16px 20px
というデザインを実現したいのです。
css
1 .link_btn{ 2 background-color: #ffe700; 3 text-align: center; 4 padding: 16px 20px; 5 display: inline-block; 6 position: absolute; 7 bottom: 0; 8 left: 0; 9 border: 1px solid #ffe700; 10 @media screen and(max-width: 1023px){ 11 padding: 8px 12px; 12 } 13 @media screen and(max-width: 767px){ 14 padding: 16px 20px; 15 }
上記コードをでは画面幅767px以下でも
css
1 @media screen and(max-width: 767px){ 2 padding: 16px 20px; 3 }
が適用されず、
css
1 @media screen and(max-width: 1023px){ 2 padding: 8px 12px; 3 }
が適用されています。
どのような書き方をすれば、
画面幅1024px以上ではpadding: 16px 20px
画面幅1023px以下から768pxまではpadding: 8px 12px
画面幅767pxから以下は padding: 16px 20px
というデザインが実現できるでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/14 07:37