如何將媒體查詢用於CSS中的不同屏幕大小

響應式設計通過媒體查詢實現，先定義移動優先的最小寬度條件，再逐步適配平板和桌面端，結合範圍、方向與分辨率優化佈局。

Responsive design starts with understanding how to adapt your layout based on screen size using media queries. These allow you to apply CSS rules only when certain conditions—like screen width—are met.

Understanding the syntax

A media query uses the @media rule followed by a condition and a block of CSS. The most common use checks the viewport width.

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

This applies styles only when the screen is 768px or smaller. You can also use min-width for larger screens, which supports mobile-first design.

Common breakpoints for devices

Designers often target typical device widths. Here are standard ranges:

• Mobile: up to 767px
• Tablet: 768px to 1023px
• Desktop: 1024px and above

You can define multiple queries to handle each case:

/* Mobile styles */
.container {
  padding: 15px;
}
<p>/ <em>Tablet</em> /
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}</p> <p>/ <em>Desktop</em> /
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}</p>

Using range conditions

Sometimes you need styles for a specific range. Combine min and max values:

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    display: none;
  }
}

This hides the sidebar only on tablets, keeping it visible on desktop and mobile if needed.

Orientation and resolution

You can also target device orientation or pixel density:

• Landscape vs portrait: @media (orientation: landscape)
• High-DPI screens: @media (-webkit-min-device-pixel-ratio: 2)

Useful for optimizing images or layout on phones held sideways or retina displays.

Basically, start small and scale up with min-width, test on real devices, and keep layout changes logical. Media queries give precise control without JavaScript.

以上是如何將媒體查詢用於CSS中的不同屏幕大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！