@media screen and (max-width:720px) and (min-width:320px) 这句代码啥意思？and是干啥的？@media screen and (max-width:320px) 又是啥意思？max-width和min-width都是规定好的吗，还是自定义的？
我来逐一解答你的问题：
1. @media screen and (max-width:720px) and (min-width:320px)
这句代码的意思是：当屏幕设备宽度在 320px 到 720px 之间时，应用里面的样式。
@media- CSS3 的媒体查询规则screen- 针对屏幕设备（区别于打印机 print 等）and- 逻辑"与"，表示所有条件必须同时满足min-width:320px- 最小宽度 320px（宽度 ≥ 320px）max-width:720px- 最大宽度 720px（宽度 ≤ 720px）
所以这个媒体查询的作用范围是：320px ≤ 屏幕宽度 ≤ 720px
2. and 的作用
and 是逻辑连接词，表示并且。多个条件必须同时成立才会应用样式。
css
/* 示例：同时满足两个条件 */@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 只在平板尺寸生效 */}3. @media screen and (max-width:320px)
这句的意思是：当屏幕宽度 ≤ 320px 时，应用里面的样式。
这是单独的媒体查询，只有 max-width:320px 这一个条件。
4. max-width 和 min-width 是规定好的吗？
是的，它们是 CSS 规范中预定义的关键字，不是自定义的。
常用媒体特性（都是规定好的）：
| 特性 | 说明 |
|---|---|
min-width | 最小宽度（≥） |
max-width | 最大宽度（≤） |
min-height | 最小高度 |
max-height | 最大高度 |
orientation | 方向（portrait/landscape） |
aspect-ratio | 宽高比 |
resolution | 分辨率 |
使用示例：
css
/* 自定义的值是后面的 320px、720px 这些数值 */@media (max-width: 500px) { } /* 500px 是自定义的 */@media (min-width: 768px) { } /* 768px 是自定义的 */@media (orientation: landscape) { } /* landscape 是规定好的值 */总结：max-width/min-width 是规定好的关键词，但后面的像素值是你根据设计需要自定义的断点。