# 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; } } } ```