媒体查询 iPhone 11 - CSS

介绍

媒体查询是CSS3中的一种技术，使得可以基于设备的特性（如屏幕分辨率、屏幕方向、浏览器窗口尺寸等）为不同的设备而设定不同的样式规则。

iPhone 11 是 Apple 公司推出的一款智能手机，屏幕尺寸为 6.1 英寸，分辨率为 828 x 1792 像素。在设计 iPhone 11 网站时，我们需要考虑不同设备的适配性问题，这时候就可以利用媒体查询来适配不同的设备。

媒体查询的语法

@media mediatype and|not|only (expressions) {
  CSS-Code;
}

• mediatype：指定查询的媒体类型，如 all（所有设备）、 print（打印机）、 screen（屏幕）、speech（语音）等。
• and、not、only：更多关键字用于组合媒体的条件。
• expressions：条件表达式，用于比较一个或多个媒体特性，如宽度、高度、颜色等。

媒体查询可以嵌套，以实现更加准确地定位不同设备。

iPhone 11 的媒体查询实例

在设计 iPhone 11 的网站时，可以使用媒体查询来设置不同的样式。

/* 手机竖屏 */
@media only screen and (min-width: 375px) and (max-width: 414px) and (orientation: portrait) {
  /* 样式代码 */
}

/* 手机横屏 */
@media only screen and (min-width: 375px) and (max-width: 414px) and (orientation: landscape) {
  /* 样式代码 */
}

/* 平板电脑竖屏 */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* 样式代码 */
}

/* 平板电脑横屏 */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* 样式代码 */
}

以上是 iPhone 11 不同设备的媒体查询实例，可以根据页面的不同要求设置不同的样式。同时，也可以嵌套使用媒体查询来实现更加细致的设备适配。