Media Query Code

First, write directly in the media query

@media Media type and (media attribute) {your style}

.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;    }}

Second, link 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)">

Media Query Code