媒體查詢代碼

標籤：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)">

媒體查詢代碼