媒體查詢關鍵代碼

來源:互聯網
上載者:User

標籤:

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 }

 

媒體查詢關鍵代碼

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.