# CSS 媒体查询属性详解：@media 和 min-width/max-width ``` @media screen and (min-width: 768px) and (max-width: 1024px) { body { background-color: lightblue; } h1 { font-size: 24px; } p { font-size: 18px; } } ``` ``` @media screen and (min-device-width: 320px) and (max-device-width: 480px) { /* 样式定义 */ } ``` ``` @media screen and (orientation: landscape) { /* 横向样式定义 */ } @media screen and (orientation: portrait) { /* 纵向样式定义 */ } ``` ``` @media screen and (min-width: 768px) and (max-width: 1024px) { body { background-color: lightblue; } @media (orientation: landscape) { h1 { font-size: 24px; margin-top: 20px; } p { font-size: 18px; } } @media (orientation: portrait) { h1 { font-size: 18px; margin-top: 10px; } p { font-size: 14px; } } } ```