css media

<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)"> 屏幕尺寸大于400px时使用该css
<link rel="stylesheet" href="middle.css" media="screen and (max-width: 399px)"> 屏幕尺寸小于399px时使用该css

body{ background : blue ;} /*宽度500px-800px之间+高度100px-400px之间 蓝色*/
@media  screen and ( max-width : 500px ){body{ background : green ;}} /*宽度小于500px时 绿色*/
@media  screen and ( min-width : 800px ){body{ background : red ;}} /*宽度大于800px时 红色*/
@media  screen and ( max-height : 100px ){body{ background :yellow;}} /*高度小于100px时 黄色*/
@media  screen and ( min-height : 400px ){body{ background :pink;}} /*高度大于400px时 粉色*/