媒體特性用於媒體查詢中，以根據(jù)設(shè)備或視口的特定特徵應(yīng)用CSS樣式。 1. 常見媒體特性包括寬度/高度、方向、分辨率和寬高比，它們描述設(shè)備的能力或當(dāng)前狀態(tài)。 2. 可使用min-、max-或精確值編寫媒體查詢，並通過“and”組合多個條件。 3. 實際用例包括針對Retina顯示屏、根據(jù)方向調(diào)整佈局以及在關(guān)鍵斷點進(jìn)行響應(yīng)式設(shè)計。 4. 注意事項包括區(qū)分device-width與視口寬度、使用相對單位、跨設(shè)備測試及避免過多重疊查詢。

You use media features in media queries to apply CSS styles based on specific characteristics of the device or viewport. They let you tailor layouts for different screens, resolutions, and orientations without needing JavaScript.

1. Understanding Common Media Features

Media features are like conditions that describe a device's capabilities or current state. Some of the most commonly used ones include:

• width / height : Refers to the width or height of the viewport (the browser window).
• orientation : Whether the screen is in landscape (wider than tall) or portrait (taller than wide).
• resolution : The pixel density of the screen, often measured in dpi or dppx .
• aspect-ratio : The ratio between the width and height of the viewport.

These aren't fixed values — they change if the user resizes the browser or rotates their phone.

2. Writing Basic Queries with Media Features

You can combine these features into media queries using min- , max- , or exact values. Here's how it works:

For example, to target devices with a max width of 768px:

 @media (max-width: 768px) {
  /* Styles for small screens */
}

Or to detect portrait orientation:

 @media (orientation: portrait) {
  /* Styles when screen is taller than wide */
}

You can also chain multiple conditions using and . Like targeting high-res portrait devices:

 @media (orientation: portrait) and (min-resolution: 2dppx) {
  /* Styles for high-res phones in portrait mode */
}

3. Practical Use Cases You Might Encounter

Here are some real-world situations where media features come in handy:

Targeting Retina Displays

High-density screens (like Retina displays) look sharper, so sometimes you want to serve higher-quality images or adjust font weights.

 @media (min-resolution: 2dppx) {
  body {
    font-weight: 500;
  }
}

Adjusting Layout Based on Orientation

Phones switch between landscape and portrait — this helps optimize layout depending on which way the user is holding their device.

 @media (orientation: landscape) {
  .sidebar {
    display: block;
  }
}

Responsive Design at Key Breakpoints

Most responsive designs rely on width-based breakpoints. A common one is switching from mobile to tablet layout:

 @media (min-width: 480px) and (max-width: 767px) {
  /* Tablet portrait styles */
}

4. Things to Watch Out For

• Don't confuse device-width with viewport width — On mobile, device-width is the full screen size, while width refers to the actual browser window (which can be zoomed).
• Use relative units — Always write media query values in px (CSS pixels), not physical units like cm or in .
• Test across devices — Emulators help, but nothing beats testing on real devices to see how your queries behave.

Also, avoid writing too many overlapping queries — it gets messy fast and can cause unexpected style overrides.

基本上就這些。

以上是如何在媒體查詢中使用媒體功能（例如寬度，高度，方向，分辨率）？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！