响应式布局 媒体查询@

响应式布局 媒体查询 @media
检查设备宽度，根据宽度设置CSS样式 在 style 标签编写

CSS 语法
@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype（媒体类型）：print/screen/speech/all 用于打印机/手机电脑屏幕/屏幕阅读器等

<style> 
body{ 
background-color: black; 
} 
@media screen and (min-width: 768px){ /*大于等于768*/ 
body{ 
background-color: red; 
} 
} 
@media screen and (min-width: 992px){ /*大于等于992*/ 
body{ 
background-color: green; 
} 
} 
</style>