@media screen and (max-width:300px){.className{};//屏幕小于300px} //min 小到大;max 大到小; 遵从一般css 优先级，所以注意被覆盖,注意 and 后的空格

min-width: 100px 表示匹配 大于等于 100px的屏幕 max-width: 100px 表示匹配 小于等于 100px的屏幕

如果能确定项目使用场景最大宽度就用 max-width系列，能确定最小宽度就用 min-width系列

一般 media 适配的值不会固定 需要根据实际业务内容来定

layout

xs <768px sm ≥768px md ≥992px lg ≥1200px xl ≥1920px

根据不同的屏幕尺寸决定采用 xs还是sm等属性值 elementUI 示例

<col :xs="24" :lg="6"></col>
<col :xs="24" :lg="6"></col>
<col :xs="24" :lg="6"></col>
<col :xs="24" :lg="6"></col> <!-- 大屏一行4个 小屏一行一个-->

实现原理：采用弹性布局+media模式
<style>
.parent{ display: flex; flex-flow: row wrap;}
@media (min-width: 992px){
  .child { flex: 0 0 50%; max-width: 50%; } 表示一行只显示两个 所以设置 50%
}
@media (min-width: 1200px) {
.child { flex: 0 0 25%; max-width: 25%;} 表示一行只显示4个 所以设置 25%
}
</style>

适配 PC

@media screen and (max-width:1920px){
  .className{};
}