媒體查詢關鍵代碼

標籤：

head裡面的代碼

<meta name="viewport" content="width=device-width, initial-scale=1">

 

媒體查詢適應不同螢幕代碼

 1 /*只有在PC下才執行的樣式*/ 2 @media screen and (min-width: 992px) { 3     h1 { 4         font-size: 36px; 5         margin: 30px 0 10px 0; 6     } 7     .box { 8         border: 1px solid #a33; 9         color: #a33;10         background-color: #fee;11         margin: 10px;12         padding: 10px;13     }14 }15 /*只有在PAD下才執行的樣式*/16 @media screen and (min-width: 768px) and (max-width: 992px) {17     h1 {18         font-size: 28px;19         margin: 20px 0 10px 0;20     }21     .box {22         border: 1px solid #3a3;23         color: #3a3;24         background-color: #efe;25         margin: 10px;26         padding: 10px;27     }28 }29 /*只有在PHONE下才執行的樣式*/30 @media screen and (max-width: 767px) {31     h1 {32         /*font-size: 28px;33         margin: 20px 0 10px 0;*/34         display: none;35     }36     .box {37         border: 1px solid #33a;38         color: #33a;39         background-color: #eef;40         margin: 10px;41         padding: 10px;42     }43 }

 

媒體查詢關鍵代碼