iPhone，iPad 等常用设备的 CSS3 Media Queries
iPhone，iPad 等常用设备的 CSS3 Media Queries
Denis
发布于 2023-04-14 16:01:24
发布于 2023-04-14 16:01:24
什么是 CSS3 Media Queries
CSS3 中的 Media Queries 可以让我们设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。现在最常见的一个例子，就是可以同时给 PC 的大屏幕和移动设备设置不同的样式表。这功能是非常强大的，它可以让我们定制不同的分辨率和设备，并在不改变内容的情况下，制作的网页在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。
CSS Media Queries
常用设备的 CSS3 Media Queries
所有 iPad Media Queries
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES */
}iPad 横屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES */
}iPad 竖屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES */
}高清屏 iPad Media Queries
即 iPad 3 & 4 的 Media Queries：
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES */
}高清屏 iPad 横屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES */
}高清屏 iPad 竖屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* STYLES GO HERE */
}iPad 1 & 2 Media Queries
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* STYLES */
}iPad 1 & 2 横屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* STYLES */
}iPad 1 & 2 竖屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
/* STYLES */
}iPad mini 也是和 iPad 1 和 2 一样。
iPhone 5 Media Queries
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES */
}iPhone 5 横屏
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES */
}iPhone 5 竖屏
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES */
}iPhone 2G, 3G, 4, 4S Media Queries
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES */
}iPhone 2G-4S 横屏
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
/* STYLES */
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录