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){ } ```