响应式设计的手机最常见的屏幕尺寸是多少？ [已关闭]

Question

我的目标是开发适合流行 iPhone 型号的移动响应式设计，我想专注于适应其屏幕尺寸的媒体查询。您可以参考讨论Apple iPhone 屏幕尺寸的博客等资源。

**请建议媒体查询 iPhone 的常见尺寸 **

Answer 1

iPhone 12 Pro Max：

屏幕尺寸：6.7英寸 分辨率：1284 x 2778 像素 建议媒体查询：

@media only screen and (max-width: 428px) {
  /* Styles for iPhone 12 Pro Max and similar devices */
}

iPhone 12 和 12 Pro：

屏幕尺寸：6.1英寸 分辨率：1170 x 2532 像素 建议媒体查询：

@media only screen and (max-width: 390px) {
  /* Styles for iPhone 12 and 12 Pro and similar devices */
}

iPhone 11：

屏幕尺寸：6.1英寸 分辨率：828 x 1792 像素 建议媒体查询：

@media only screen and (max-width: 414px) {
  /* Styles for iPhone 11 and similar devices */
}

iPhone SE（第二代）：

屏幕尺寸：4.7英寸 分辨率：750 x 1334 像素 建议媒体查询：

@media only screen and (max-width: 375px) {
  /* Styles for iPhone SE (2nd generation) and similar devices */
}

iPhone SE（第一代）：

屏幕尺寸：4.0英寸 分辨率：640 x 1136 像素 建议媒体查询：

@media only screen and (max-width: 320px) {
  /* Styles for iPhone SE (1st generation) and similar devices */
}