css CSS：媒体查询（来自stephen.io的bootstrap +移动设备）

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css CSS：媒体查询（来自stephen.io的bootstrap +移动设备）相关的知识，希望对你有一定的参考价值。

// # < 1200 #
@media (max-width: 1199px) {

}
// # < 992 #
@media (max-width: 991px) {

}
// # < 768 #
@media (max-width: 767px) {

}
// # < 480 #
@media (max-width: 479px) {

}

// # iPad in portrait & landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 	
}

// # iPad in landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
}

// # iPad in portrait #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
}

// # Retina iPad in portrait & landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
}

// # Retina iPad in landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
}

// # Retina iPad in portrait #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
}

// # iPad MINI in portrait & landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  { 
}

// # iPad MINI in landscape #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  { 
}

// # iPad MINI in portrait #
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {  
}

// # Smarphone in portrait & landscape #
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
}

// # Smarphone in landscape #
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
}

// # Smarphone in portrait #
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
}

以上是关于css CSS：媒体查询（来自stephen.io的bootstrap +移动设备）的主要内容，如果未能解决你的问题，请参考以下文章