網頁像素與屏幕分辨率的關係：固定寬度頁面在高分屏的表現

核心結論

網頁 CSS 像素不會隨屏幕分辨率自動變化。 若頁面固定寬度 1024px，在 1366px 寬屏上右側會留白；在 800px 窄屏上則會出現橫向滾動條。

詳細說明

• CSS 像素 ≠ 設備物理像素：高 DPI 屏幕下 1 CSS 像素對應多個物理像素（如 Retina 2x），但邏輯尺寸不變；
• 固定寬度佈局：width: 1024px 永遠佔據 1024 CSS 像素，居中顯示時兩側留白；
• 響應式佈局：使用百分比、max-width、媒體查詢實現自適應，避免留白或溢出。

最佳實踐

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 768px) { /* 移動端調整 */ }