媒體查詢代碼

來源:互聯網
上載者:User

標籤:dia   大屏   width   media   type   idt   樣式   代碼   sky   

一、直接寫在媒體查詢裡

@media 媒體類型and (媒體特性){你的樣式}

.d1{    width:200px;    height:600px;    background:#000;  }  /*  超小螢幕 手機> */  @media screen and (max-width:768px){    .d1{      background:skyblue;    }  }  /*  小螢幕 平板 */  @media screen and (min-width:768px) and (max-width:992px){    .d1{      background:#999;    }  }  /*  中等螢幕 案頭顯示器 */  @media screen and (min-width:992px) and (max-width:1200px){    .d1{      background:blue;    }  }  /*  大螢幕 大案頭顯示器> */  @media screen and (min-width:1200px){    .d1{      background:pink;    }}
二、連結css
<link rel="stylesheet" type="text/css"  href="styleA.css" media="screen(max-width:768px)"><link rel="stylesheet" type="text/css"  href="styleB.css" media="screen(min-width:768px) and (max-width:992px)"><link rel="stylesheet" type="text/css"  href="styleC.css" media="screen(max-width:992px) and (max-width:1200x)"><link rel="stylesheet" type="text/css"  href="styleD.css" media="screen(min-width:1200)">

媒體查詢代碼

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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