为Ipad Pro和Ipad CSS提供正确的媒体查询及示例

588 阅读1分钟

有时,你想为Ipad和Ipad pro设计页面,所以你必须使用媒体查询来编写CSS样式。

这篇文章涵盖了Ipad在不同方向上的正确媒体查询。

苹果公司的iPad平板电脑有不同的版本11和最新的版本12.x。

Ipad和pro的最新版本是12.x。

我们用设备的宽度、高度和方向来写媒体查询。

Ipad有两个版本(基本版和专业版),这是一个IPAD媒体查询。

@media all and (device-width: 768px) {
  
}

这里是ipad pro的媒体查询

@media all and (device-width: 1024px) {
  
}

上述所有代码只在没有方向的情况下工作。

要使它具有方向性,我们需要指定高度和方向。

Ipad方向的CSS查询

@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) { div{ width: 50%; }}

@media only screen and (width: 768px) and (height: 1024px) and (orientation: landscape) { div{ width:50%; }}