概念：为不同尺寸的屏幕设定不同的css样式，移动端使用频率高
@#media常用参数
属性名称作用width、height浏览器可视宽度、高度device-width设备屏幕的宽度device-height设备屏幕的高度<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>写法一：style样式表
<style> #div0{width:100px; height:200px } @media screen and (min-device-width:200px) and (max-device-width:300px) {#div0{background-color:red;}} @media screen and (min-device-width:301px) and (max-device-width:500px) {#div0{background-color:blue;}}</style>写法二：写在style标签中，有条件的执行某个内部样式表
<style media="(min-device-width:200px) and (max-device-width:300px)">#div0{background-color:red;}</style>写法三： 外部样式表中
写好css样式表，在不同的屏幕中引入对应的样式表