1、all：所有设备生效 ```css @media all{ body{ background-color: #bfa; } } ``` 2、print：打印设备生效 ```css @media print{ body{ background-color: #bfa; } } ``` 3、speech：屏幕阅读器生效 ```css @media print{ body{ background-color: #bfa; } } ``` 多个媒体类型用逗号隔开 可在媒体类型前添加一个only，表示只有是屏幕的时候才会生效，用来兼容老版本浏览器，有些浏览器老版本不支持，但是确还能解析，导致无论什么情况都会应用里面的css样式，加上only就能让不支持就跳过里面的样式，除了only还有not取反 ```css @media only screen{ } @media print,screen{} /*小于300 或者大于500*/ @media (max-width:300px),(min-width:500px){} /*300～500之间*/ @media (max-width:500px) and (min-width:300px){} /*300～500之间最完整写法*/ @media only screen and (max-width:500px) and (min-width:300px){} /*宽度等于500px时生效*/ @media(width:500px){ } /*高度度等于500px时生效*/ @media(height:500px){ } ``` 4、screen：带屏幕的设备生效 ```css /*宽度大于768px里面的值才会生效*/ @media screen and (min-width:768px){  .a{  　　 background: url('../image/banner/banner1.jpg') no-repeat left top; } } ``` max-width：定义输出设备中视口的最大可见区域宽度   即宽度小于768px里面的值才会生效 min-width：定义输出设备中视口的最小可见区域宽度  即宽度大于768px里面的值才会生效 小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1290 大屏幕 min-width=1200p: 块元素（如div等）宽度默认是100% 既为父元素宽度的 100%. body的默认宽度 除去margin等也是html父元素的100% html的默认宽度是浏览设备窗口的宽度 横屏模式下 ```css @media all and (orientation:landscape){ } ``` 竖屏模式下 ```css @media all and (orientation:portrait){ } ```